diff --git a/apps/website/screens/components/footer/code/FooterCodePage.tsx b/apps/website/screens/components/footer/code/FooterCodePage.tsx
index 0de8bdbb3..4dee76a7b 100644
--- a/apps/website/screens/components/footer/code/FooterCodePage.tsx
+++ b/apps/website/screens/components/footer/code/FooterCodePage.tsx
@@ -4,12 +4,22 @@ import DocFooter from "@/common/DocFooter";
 import StatusBadge from "@/common/StatusBadge";
 import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
 
+const bottomLinksTypeString = `{
+  href: string;
+  text: string;
+}[]`;
+
 const logoTypeString = `{
-  href?: string;
   src: string;
-  title?: string;
+  alt: string;
 }`;
 
+const socialLinkTypeString = `{
+  href: string;
+  title: string;
+  logo: string | SVG;
+}[]`;
+
 const sections = [
   {
     title: "Props",
@@ -27,7 +37,7 @@ const sections = [
           <tr>
             <td>bottomLinks</td>
             <td>
-              <TableCode>{"{ href: string; text: string; }[]"}</TableCode>
+              <ExtendedTableCode>{bottomLinksTypeString}</ExtendedTableCode>
             </td>
             <td>
               An array of objects representing the links that will be rendered at the bottom part of the footer. Each
@@ -46,9 +56,12 @@ const sections = [
           <tr>
             <td>children</td>
             <td>
-              <TableCode>React.ReactNode</TableCode>
+              <TableCode>ReactNode</TableCode>
+            </td>
+            <td>
+              Contains DxcFooter.LeftContent and DxcFooter.RightContent components to customize the left and right
+              content of the footer respectively.
             </td>
-            <td>The center section of the footer. Can be used to render custom content in this area.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -63,33 +76,33 @@ const sections = [
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
                 <StatusBadge status="new" />
-                logo
+                leftContent
               </DxcFlex>
             </td>
             <td>
-              <td>
-                <TableCode>{"Logo"}</TableCode>
-                <p>
-                  being <Code>Logo</Code> an object with the following properties:
-                </p>
-                <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
-              </td>
+              <TableCode>ReactNode</TableCode>
             </td>
-            <td>Logo to be displayed inside the header.</td>
+            <td>Content to be displayed on the left side of the footer under the logo.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>margin</td>
             <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                logo
+              </DxcFlex>
+            </td>
+            <td>
+              <td>
+                <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
+              </td>
             </td>
-            <td>Size of the top margin to be applied to the footer.</td>
+            <td>Logo to be displayed inside the footer.</td>
             <td>-</td>
           </tr>
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="new" />
                 mode
               </DxcFlex>
             </td>
@@ -111,12 +124,23 @@ const sections = [
               <TableCode>'default'</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                rightContent
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>ReactNode</TableCode>
+            </td>
+            <td>Content to be displayed on the right side of the footer before the socialLinks if provided.</td>
+            <td>-</td>
+          </tr>
           <tr>
             <td>socialLinks</td>
             <td>
-              <TableCode>
-                {`{ href: string; title: string; logo: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); }[]`}
-              </TableCode>
+              <ExtendedTableCode>{socialLinkTypeString}</ExtendedTableCode>
             </td>
             <td>
               An array of objects representing the links that will be rendered as icons at the top-right side of the
@@ -148,7 +172,8 @@ const sections = [
               <TableCode>number</TableCode>
             </td>
             <td>
-              Value of the <Code>tabindex</Code> for all interactive elements, except those inside the custom area.
+              Value of the <Code>tabindex</Code> for all interactive elements, except those inside the leftContent and
+              rightContent.
             </td>
             <td>
               <TableCode>0</TableCode>
@@ -158,29 +183,6 @@ const sections = [
       </DxcTable>
     ),
   },
-  {
-    title: "Examples",
-    subSections: [
-      {
-        title: "Footer in application layout",
-        content: (
-          <iframe
-            src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
-            style={{
-              width: "100%",
-              minHeight: "500px",
-              border: "0",
-              borderRadius: "4px",
-              overflow: "hidden",
-            }}
-            title="Footer and header"
-            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-          />
-        ),
-      },
-    ],
-  },
 ];
 
 const FooterCodePage = () => {
diff --git a/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx b/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx
index 4b901c89e..24edbe683 100644
--- a/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx
+++ b/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx
@@ -31,6 +31,10 @@ const sections = [
             <strong>Logo:</strong> Represents the brand identity visually. Positioned on the left side, it helps
             reinforce company recognition across all pages.
           </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Border:</strong> Marks the upper boundary of the header to visually separate it from the main
+            content.
+          </DxcBulletedList.Item>
           <DxcBulletedList.Item>
             <strong>Social icons:</strong> A set of clickable icons linking to the company's social media platforms
             (e.g., LinkedIn, Facebook). Placed on the right side for easy visibility and access.
@@ -43,6 +47,12 @@ const sections = [
             <strong>Company links:</strong> A horizontal list of navigational hyperlinks such as Privacy Policy, Terms &
             Conditions, etc. Offers users access to important legal or informational resources.
           </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Left slot:</strong> Commonly used for short informational paragraphs or contact details.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Right slot:</strong> Commonly used for additional links, buttons, forms, or call to action.
+          </DxcBulletedList.Item>
         </DxcBulletedList>
       </>
     ),
@@ -52,21 +62,22 @@ const sections = [
     content: (
       <>
         <DxcParagraph>
-          To maintain consistency in layout flexibility and brand presentation, the footer offers three primary
-          variants: <strong>Default</strong>, <strong>With Navigation</strong>, and <strong>Small</strong>.
+          To maintain consistency in layout flexibility and brand presentation, the footer offers two primary variants:{" "}
+          <strong>Default</strong> and <strong>Reduced</strong>.
         </DxcParagraph>
         <DxcBulletedList>
           <DxcBulletedList.Item>
             <strong>Default:</strong> provides a balanced layout with branding and essential legal links. It offers a
             clean, uncluttered appearance suitable for most standard applications.
+            <DxcBulletedList>
+              <DxcBulletedList.Item>
+                Users can add content to the Default view using custom code such as content sections, text, links, and
+                other components for increased customization based on their specific needs.
+              </DxcBulletedList.Item>
+            </DxcBulletedList>
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>With Navigation:</strong> includes additional navigational sections, enabling users to quickly
-            access key areas of the site. This layout is ideal for content-heavy pages or enterprise-level applications
-            requiring enhanced footer functionality.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Small:</strong> offers a compact version of the footer, typically limited to branding and minimal
+            <strong>Reduced:</strong> offers a compact version of the footer, typically limited to branding and minimal
             legal text. It's best suited for lightweight experiences, login pages, or environments with constrained
             vertical space.
           </DxcBulletedList.Item>
@@ -87,13 +98,15 @@ const sections = [
       <>
         <DxcBulletedList>
           <DxcBulletedList.Item>
-            <strong>Dock the footer to the bottom of the page:</strong> the footer should remain fixed at the bottom
-            edge of the viewport and not scroll with the page content to maintain visibility and separation from dynamic
-            areas.
+            <strong>Dock the footer at the bottom of the page:</strong> The footer should appear after the content at
+            the bottom page at all times. If the page content exceeds the current view and the user needs to scroll to
+            reach the bottom of the content and see the footer.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Ensure full-width alignment:</strong> the footer container should always span the full width of the
-            screen to create a clean, structured boundary and support responsive behavior across breakpoints.
+            <strong>Ensure full-width alignment:</strong> By default, the footer spans the entire width of the page
+            excluding the Sidenav. For cases when the left Sidenav is not used, the footer container should always span
+            the full width of the screen to create a clean, structured boundary and support responsive behavior across
+            breakpoints.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
             <strong>Display copyright information on the right:</strong> consistently place legal disclaimers or
diff --git a/apps/website/screens/components/footer/overview/images/footer_anatomy.png b/apps/website/screens/components/footer/overview/images/footer_anatomy.png
index ff389c855..ac635ef30 100644
Binary files a/apps/website/screens/components/footer/overview/images/footer_anatomy.png and b/apps/website/screens/components/footer/overview/images/footer_anatomy.png differ
diff --git a/apps/website/screens/components/footer/overview/images/footer_variants.png b/apps/website/screens/components/footer/overview/images/footer_variants.png
index 91dcef94b..59e8294f7 100644
Binary files a/apps/website/screens/components/footer/overview/images/footer_variants.png and b/apps/website/screens/components/footer/overview/images/footer_variants.png differ
diff --git a/packages/lib/src/footer/Footer.accessibility.test.tsx b/packages/lib/src/footer/Footer.accessibility.test.tsx
index e4fce1011..a6b04829c 100644
--- a/packages/lib/src/footer/Footer.accessibility.test.tsx
+++ b/packages/lib/src/footer/Footer.accessibility.test.tsx
@@ -2,6 +2,13 @@ import { render } from "@testing-library/react";
 import { axe, formatRules } from "../../test/accessibility/axe-helper";
 import DxcFooter from "./Footer";
 import rules from "../../test/accessibility/rules/specific/footer/disabledRules";
+import { vi } from "vitest";
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
 
 const disabledRules = {
   rules: formatRules(rules),
@@ -90,22 +97,31 @@ const bottom = [
 describe("Footer component accessibility tests", () => {
   it("Should not have basic accessibility issues", async () => {
     const { container } = render(
-      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} margin="small" mode="default">
-        <div>
-          <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
-        </div>
-      </DxcFooter>
+      <DxcFooter
+        copyright="Copyright"
+        socialLinks={social}
+        bottomLinks={bottom}
+        mode="default"
+        leftContent={
+          <>
+            <div>
+              <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
+            </div>
+          </>
+        }
+        rightContent={
+          <div>
+            <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
+          </div>
+        }
+      />
     );
     const results = await axe(container, disabledRules);
     expect(results.violations).toHaveLength(0);
   });
   it("Should not have basic accessibility issues for reduced mode", async () => {
     const { container } = render(
-      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} margin="small" mode="reduced">
-        <div>
-          <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
-        </div>
-      </DxcFooter>
+      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} mode="reduced" />
     );
     const results = await axe(container, disabledRules);
     expect(results.violations).toHaveLength(0);
diff --git a/packages/lib/src/footer/Footer.stories.tsx b/packages/lib/src/footer/Footer.stories.tsx
index ea1e2bfb3..003a178fb 100644
--- a/packages/lib/src/footer/Footer.stories.tsx
+++ b/packages/lib/src/footer/Footer.stories.tsx
@@ -3,11 +3,16 @@ import Title from "../../.storybook/components/Title";
 import preview from "../../.storybook/preview";
 import disabledRules from "../../test/accessibility/rules/specific/footer/disabledRules";
 import DxcFlex from "../flex/Flex";
-import DxcTypography from "../typography/Typography";
 import DxcFooter from "./Footer";
 import DxcLink from "../link/Link";
 import { Meta, StoryObj } from "@storybook/react-vite";
 import { userEvent, within } from "storybook/internal/test";
+import DxcParagraph from "../paragraph/Paragraph";
+import DxcHeading from "../heading/Heading";
+import DxcApplicationLayout from "../layout/ApplicationLayout";
+import DxcHeader from "../header/Header";
+import DxcBadge from "../badge/Badge";
+import DxcButton from "../button/Button";
 
 export default {
   title: "Footer",
@@ -52,10 +57,10 @@ const social = [
     href: "https://x.com/dxctechnology",
     logo: (
       <svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect width="256" height="256" rx="40" fill="white" />
+        <rect width="256" height="256" rx="40" fill="currentColor" />
         <path
           d="M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z"
-          fill="#0F1419"
+          fill="white"
         />
       </svg>
     ),
@@ -122,9 +127,59 @@ const bottom = [
   },
 ];
 
-const info = [
-  { label: "Example Label", text: "Example" },
-  { label: "Example Label", text: "Example" },
+const bottomLong = [
+  {
+    href: "https://www.linkedin.com/company/dxctechnology",
+    text: "Linkedin",
+  },
+  {
+    href: "https://x.com/dxctechnology",
+    text: "X",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    text: "Facebook",
+  },
 ];
 
 const Footer = () => (
@@ -133,62 +188,441 @@ const Footer = () => (
       <Title title="Default" theme="light" level={4} />
       <DxcFooter />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With custom logo" theme="light" level={4} />
+      <DxcFooter logo={{ src: "https://picsum.photos/id/1000/104/34", alt: "Custom logo" }} />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="With children, copyright, bottom links and social links" theme="light" level={4} />
-      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
-        <DxcLink href="https://www.linkedin.com/company/dxctechnology" inheritColor>
-          Linkedin
-        </DxcLink>
-      </DxcFooter>
+      <DxcFooter
+        socialLinks={social}
+        bottomLinks={bottom}
+        leftContent={
+          <>
+            <DxcParagraph>
+              Application description, version, notes, and contact details can go here for additional information
+            </DxcParagraph>
+            <DxcParagraph>
+              <strong>Contact Us:</strong> email@dxc.com
+            </DxcParagraph>
+          </>
+        }
+        rightContent={
+          <>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+          </>
+        }
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With long content" theme="light" level={4} />
+      <DxcFooter
+        socialLinks={social}
+        bottomLinks={bottomLong}
+        copyright="This is a long copyright text, this is a long copyright text, this is a long copyright text, this is a long copyright text, this is a long copyright text, this is a long copyright text, this is a long copyright text."
+        leftContent={
+          <>
+            <DxcParagraph>
+              Application description, version, notes, and contact details can go here for additional information.
+              Application description, version, notes, and contact details can go here for additional information
+              Application description, version, notes, and contact details can go here for additional information
+              Application description, version, notes, and contact details can go here for additional information
+              Application description, version, notes, and contact details can go here for additional information
+              Application description, version, notes, and contact details can go here for additional information
+            </DxcParagraph>
+            <DxcParagraph>
+              <strong>Contact Us:</strong> email@dxc.com
+            </DxcParagraph>
+          </>
+        }
+        rightContent={
+          <>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+          </>
+        }
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With children, copyright, bottom links and social links from material" theme="light" level={4} />
-      <DxcFooter copyright="Copyright" socialLinks={socialMaterialIcons} bottomLinks={bottom}>
-        <DxcLink href="https://www.linkedin.com/company/dxctechnology" inheritColor>
-          Linkedin
-        </DxcLink>
-      </DxcFooter>
+      <DxcFooter
+        copyright="Copyright"
+        socialLinks={socialMaterialIcons}
+        bottomLinks={bottom}
+        leftContent={
+          <>
+            <DxcParagraph>
+              Application description, version, notes, and contact details can go here for additional information
+            </DxcParagraph>
+            <DxcParagraph>
+              <strong>Contact Us:</strong> email@dxc.com
+            </DxcParagraph>
+          </>
+        }
+        rightContent={
+          <>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+          </>
+        }
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused bottom and social links" theme="light" level={4} />
-      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
-        <DxcLink href="https://www.linkedin.com/company/dxctechnology" inheritColor>
-          Linkedin
-        </DxcLink>
-      </DxcFooter>
+      <DxcFooter
+        copyright="Copyright"
+        socialLinks={social}
+        bottomLinks={bottom}
+        leftContent={
+          <>
+            <DxcParagraph>
+              Application description, version, notes, and contact details can go here for additional information
+            </DxcParagraph>
+            <DxcParagraph>
+              <strong>Contact Us:</strong> email@dxc.com
+            </DxcParagraph>
+          </>
+        }
+        rightContent={
+          <>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+            <DxcFlex direction="column">
+              <DxcHeading text="Forms" level={5} margin={{ bottom: "small" }} />
+              <DxcLink>Login / Sign-up</DxcLink>
+              <DxcLink>Subscribe</DxcLink>
+              <DxcLink>Unsubsicribe</DxcLink>
+            </DxcFlex>
+          </>
+        }
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Reduced" theme="light" level={4} />
-      <DxcFooter mode="reduced">
-        <DxcFlex justifyContent="center" alignItems="center" gap="1rem">
-          {info.map((tag, index) => (
-            <DxcTypography color="white" key={`tag${index}${tag.label}${tag.text}`}>
-              {tag.label}: {tag.text}
-            </DxcTypography>
-          ))}
-        </DxcFlex>
-      </DxcFooter>
+      <DxcFooter mode="reduced" />
     </ExampleContainer>
-    <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
-      <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcFooter margin="xxsmall" />
-      <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcFooter margin="xsmall" />
-      <Title title="Small margin" theme="light" level={4} />
-      <DxcFooter margin="small" />
-      <Title title="Medium margin" theme="light" level={4} />
-      <DxcFooter margin="medium" />
-      <Title title="Large margin" theme="light" level={4} />
-      <DxcFooter margin="large" />
-      <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcFooter margin="xlarge" />
-      <Title title="Xxlarge margin" theme="light" level={4} />
-      <DxcFooter margin="xxlarge" />
+      <Title title="Reduced with custom logo" theme="light" level={4} />
+      <DxcFooter mode="reduced" logo={{ src: "https://picsum.photos/id/1000/104/34", alt: "Custom logo" }} />
     </ExampleContainer>
   </>
 );
 
+const dxcLogo = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
+    <title>DXC Logo</title>
+    <g transform="translate(0)">
+      <g>
+        <path
+          d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322"
+          transform="translate(-21.028 65.555)"
+          fill="#010101"
+        />
+        <path
+          d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978"
+          transform="translate(-21.049 88.739)"
+          fill="#603494"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+const dxcBrandedLogo = {
+  src: dxcLogo,
+  alt: "DXC Logo",
+};
+
+const items = [
+  {
+    label: "Grouped Item 1",
+    icon: "favorite",
+    items: [
+      { label: "Item 1", icon: "person", selected: true },
+      {
+        label: "Grouped Item 2",
+        items: [
+          {
+            label: "Item 2",
+            icon: "bookmark",
+            badge: <DxcBadge color="primary" label="Experimental" />,
+          },
+          { label: "Selected Item 3" },
+        ],
+      },
+    ],
+    badge: <DxcBadge color="success" label="New" />,
+  },
+  { label: "Item 4", icon: "key" },
+  { label: "Item 5", icon: "person" },
+  { label: "Grouped Item 6", items: [{ label: "Item 7", icon: "person" }, { label: "Item 8" }] },
+  { label: "Item 9" },
+];
+
+const FooterInLayout = () => (
+  <DxcApplicationLayout
+    header={
+      <DxcHeader
+        logo={dxcBrandedLogo}
+        navItems={items}
+        sideContent={(isResponsive) =>
+          isResponsive ? (
+            <>
+              <DxcButton icon="settings" title="Settings" mode="tertiary" size={{ height: "medium" }} />
+            </>
+          ) : (
+            <>
+              <DxcButton icon="settings" title="Settings" mode="tertiary" size={{ height: "medium" }} />
+              <DxcButton label="Side button" mode="secondary" size={{ height: "medium" }} />
+              <DxcButton label="Another button" mode="primary" size={{ height: "medium" }} />
+            </>
+          )
+        }
+        responsiveBottomContent={
+          <>
+            <DxcButton label="Bottom content button" mode="secondary" size={{ width: "fillParent" }} />
+            <DxcButton label="Another button" mode="primary" size={{ width: "fillParent" }} />
+          </>
+        }
+      />
+    }
+    sidenav={<DxcApplicationLayout.Sidenav navItems={items} />}
+  >
+    <DxcApplicationLayout.Main>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+    </DxcApplicationLayout.Main>
+  </DxcApplicationLayout>
+);
+
+const ReducedFooterInLayout = () => (
+  <DxcApplicationLayout
+    header={
+      <DxcHeader
+        logo={dxcBrandedLogo}
+        navItems={items}
+        sideContent={(isResponsive) =>
+          isResponsive ? (
+            <>
+              <DxcButton icon="settings" title="Settings" mode="tertiary" size={{ height: "medium" }} />
+            </>
+          ) : (
+            <>
+              <DxcButton icon="settings" title="Settings" mode="tertiary" size={{ height: "medium" }} />
+              <DxcButton label="Side button" mode="secondary" size={{ height: "medium" }} />
+              <DxcButton label="Another button" mode="primary" size={{ height: "medium" }} />
+            </>
+          )
+        }
+        responsiveBottomContent={
+          <>
+            <DxcButton label="Bottom content button" mode="secondary" size={{ width: "fillParent" }} />
+            <DxcButton label="Another button" mode="primary" size={{ width: "fillParent" }} />
+          </>
+        }
+      />
+    }
+    sidenav={<DxcApplicationLayout.Sidenav navItems={items} />}
+    footer={<DxcFooter mode="reduced" />}
+  >
+    <DxcApplicationLayout.Main>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+    </DxcApplicationLayout.Main>
+  </DxcApplicationLayout>
+);
+
 const Tooltip = () => {
   return (
     <ExampleContainer>
@@ -204,6 +638,24 @@ export const Chromatic: Story = {
   render: Footer,
 };
 
+export const Responsive: Story = {
+  render: Footer,
+  parameters: {
+    chromatic: { viewports: [375] },
+  },
+  globals: {
+    viewport: { value: "iphonex", isRotated: false },
+  },
+};
+
+export const InLayout: Story = {
+  render: FooterInLayout,
+};
+
+export const ReducedInLayout: Story = {
+  render: ReducedFooterInLayout,
+};
+
 export const FooterTooltipFirst: Story = {
   render: Tooltip,
   play: async ({ canvasElement }) => {
diff --git a/packages/lib/src/footer/Footer.test.tsx b/packages/lib/src/footer/Footer.test.tsx
index e0a615d68..2cb34a346 100644
--- a/packages/lib/src/footer/Footer.test.tsx
+++ b/packages/lib/src/footer/Footer.test.tsx
@@ -1,5 +1,13 @@
 import { render } from "@testing-library/react";
 import DxcFooter from "./Footer";
+import { getContrastColor } from "./utils";
+
+// Mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
 
 const social = [
   {
@@ -27,40 +35,52 @@ describe("Footer component tests", () => {
   });
   test("Footer renders with bottom links", () => {
     const { getByText } = render(<DxcFooter bottomLinks={bottom} />);
-    const link = getByText("bottom-link-text");
-    expect(link.getAttribute("href")).toBe("https://www.test.com/bottom");
+    const link = getByText("bottom-link-text").closest("a");
+    expect(link?.getAttribute("href")).toBe("https://www.test.com/bottom");
   });
   test("Footer renders with copyright text", () => {
     const { getByText } = render(<DxcFooter copyright="test-copyright" />);
     expect(getByText("test-copyright")).toBeTruthy();
   });
-  test("Footer renders with correct children", () => {
+  test("Footer renders LeftContent correctly", () => {
     // We need to force the offsetWidth value
     Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
       configurable: true,
       value: 1024,
     });
-    const { getByText } = render(
-      <DxcFooter>
-        <p>footer-child-text</p>
-      </DxcFooter>
-    );
-    expect(getByText("footer-child-text")).toBeTruthy();
+    const { getByText } = render(<DxcFooter leftContent={<p>footer-left-text</p>} />);
+    expect(getByText("footer-left-text")).toBeTruthy();
   });
-  test("Footer renders with children in mobile", () => {
+  test("Footer renders RightContent correctly", () => {
+    // We need to force the offsetWidth value
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 1024,
+    });
+    const { getByText } = render(<DxcFooter rightContent={<p>footer-right-text</p>} />);
+    expect(getByText("footer-right-text")).toBeTruthy();
+  });
+  test("Footer renders LeftContent in mobile", () => {
     // 425 is mobile width
     Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
       configurable: true,
       value: 425,
     });
 
-    const { queryByText } = render(
-      <DxcFooter>
-        <p>footer-child-text</p>
-      </DxcFooter>
-    );
+    const { queryByText } = render(<DxcFooter leftContent={<p>footer-left-text</p>} />);
+
+    expect(queryByText("footer-left-text")).toBeTruthy();
+  });
+  test("Footer renders RightContent in mobile", () => {
+    // 425 is mobile width
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 425,
+    });
+
+    const { queryByText } = render(<DxcFooter rightContent={<p>footer-right-text</p>} />);
 
-    expect(queryByText("footer-child-text")).toBeTruthy();
+    expect(queryByText("footer-right-text")).toBeTruthy();
   });
   test("Footer is fully rendered", () => {
     Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
@@ -69,16 +89,37 @@ describe("Footer component tests", () => {
     });
 
     const { getAllByRole, getByText } = render(
-      <DxcFooter socialLinks={social} bottomLinks={bottom} copyright="test-copyright">
-        <p>footer-child-text</p>
-      </DxcFooter>
+      <DxcFooter
+        socialLinks={social}
+        bottomLinks={bottom}
+        copyright="test-copyright"
+        leftContent={<p>footer-left-text</p>}
+        rightContent={<p>footer-right-text</p>}
+      />
     );
     const socialIcon = getAllByRole("link")[0];
     expect(socialIcon?.getAttribute("href")).toBe("https://www.test.com/social");
     expect(socialIcon?.getAttribute("aria-label")).toBe("test");
-    const bottomLink = getByText("bottom-link-text");
-    expect(bottomLink.getAttribute("href")).toBe("https://www.test.com/bottom");
+    const bottomLink = getByText("bottom-link-text").closest("a");
+    expect(bottomLink?.getAttribute("href")).toBe("https://www.test.com/bottom");
     expect(getByText("test-copyright")).toBeTruthy();
-    expect(getByText("footer-child-text")).toBeTruthy();
+    expect(getByText("footer-left-text")).toBeTruthy();
+    expect(getByText("footer-right-text")).toBeTruthy();
+  });
+});
+
+describe("getContrastColor function", () => {
+  test("should return black color for light backgrounds", () => {
+    expect(getContrastColor("#FFFFFF")).toBe("var(--color-fg-neutral-dark)");
+    expect(getContrastColor("#F5F5F5")).toBe("var(--color-fg-neutral-dark)");
+    expect(getContrastColor("rgb(255, 255, 255)")).toBe("var(--color-fg-neutral-dark)");
+    expect(getContrastColor("rgb(245, 245, 245)")).toBe("var(--color-fg-neutral-dark)");
+  });
+
+  test("should return white color for dark backgrounds", () => {
+    expect(getContrastColor("#000000")).toBe("var(--color-fg-neutral-bright)");
+    expect(getContrastColor("#333333")).toBe("var(--color-fg-neutral-bright)");
+    expect(getContrastColor("rgb(0, 0, 0)")).toBe("var(--color-fg-neutral-bright)");
+    expect(getContrastColor("rgb(51, 51, 51)")).toBe("var(--color-fg-neutral-bright)");
   });
 });
diff --git a/packages/lib/src/footer/Footer.tsx b/packages/lib/src/footer/Footer.tsx
index 42019cc08..8029b93b2 100644
--- a/packages/lib/src/footer/Footer.tsx
+++ b/packages/lib/src/footer/Footer.tsx
@@ -1,208 +1,296 @@
-import { useContext } from "react";
+import { ReactNode, useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled from "@emotion/styled";
-import { responsiveSizes, spaces } from "../common/variables";
-import DxcFlex from "../flex/Flex";
 import DxcIcon from "../icon/Icon";
 import { Tooltip } from "../tooltip/Tooltip";
 import { dxcLogo, dxcSmallLogo } from "./Icons";
 import FooterPropsType from "./types";
 import { HalstackLanguageContext } from "../HalstackContext";
+import { getContrastColor, getResponsiveStyles } from "./utils";
+import DxcLink from "../link/Link";
+import useWidth from "../utils/useWidth";
+import { css } from "@emotion/react";
 
 const FooterContainer = styled.footer<{
-  margin: FooterPropsType["margin"];
   mode?: FooterPropsType["mode"];
 }>`
-  background-color: var(--color-bg-neutral-strongest);
   box-sizing: border-box;
   display: flex;
   flex-direction: ${(props) => (props?.mode === "default" ? "column" : "row")};
   justify-content: space-between;
-  margin-top: ${(props) => (props.margin ? spaces[props.margin] : "var(--spacing-padding-none)")};
-  min-height: ${(props) => (props?.mode === "default" ? "124px" : "40px")};
   width: 100%;
-  gap: var(--spacing-gap-m);
-  padding: ${(props) =>
-    props?.mode === "default"
-      ? "var(--spacing-padding-m) var(--spacing-padding-xl)"
-      : "var(--spacing-padding-s) var(--spacing-padding-xl)"};
-  @media (max-width: ${responsiveSizes.medium}rem) {
-    padding: var(--spacing-padding-l) var(--spacing-padding-ml);
-  }
-  @media (max-width: ${responsiveSizes.small}rem) {
-    flex-direction: column;
-  }
 `;
 
-const BottomContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-
-  @media (min-width: ${responsiveSizes.small}rem) {
-    flex-direction: row;
-  }
-  @media (max-width: ${responsiveSizes.small}rem) {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  border-top: var(--border-width-s) var(--border-style-default) var(--border-color-primary-medium);
-  margin-top: var(--spacing-gap-m);
-`;
+const MainContainer = styled.div<{ width: number }>`
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  min-height: 80px;
+  border-top: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-lighter);
 
-const ChildComponents = styled.div`
-  min-height: var(--height-xxs);
-  color: var(--color-fg-neutral-bright);
+  ${(props) =>
+    getResponsiveStyles.isMediumScreen(props.width) &&
+    css`
+      min-height: auto;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto;
+      gap: var(--spacing-gap-ml);
+      padding: var(--spacing-padding-l) var(--spacing-padding-m);
+    `}
 `;
 
-const Copyright = styled.div`
-  margin-top: var(--spacing-padding-xs);
-  font-family: var(--typography-font-family);
-  font-size: var(--typography-label-s);
-  font-weight: var(--typography-label-regular);
-  color: var(--color-fg-neutral-bright);
-
-  @media (min-width: ${responsiveSizes.small}rem) {
-    max-width: 40%;
-    text-align: right;
-  }
+const LeftContainer = styled.div<{ width: number }>`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-gap-ml);
+  color: var(--color-fg-neutral-dark);
+  box-sizing: border-box;
+  padding: var(--spacing-padding-l) var(--spacing-padding-xl);
 
-  @media (max-width: ${responsiveSizes.small}rem) {
-    max-width: 100%;
-    width: 100%;
-    text-align: left;
-  }
+  ${(props) =>
+    getResponsiveStyles.isMediumScreen(props.width) &&
+    css`
+      padding: var(--spacing-padding-none);
+    `}
 `;
 
 const LogoContainer = styled.span<{ mode?: FooterPropsType["mode"] }>`
   max-height: ${(props) => (props?.mode === "default" ? "var(--height-m)" : "var(--height-xxs)")};
-  width: auto;
+  width: fit-content;
+  text-align: center;
+
+  ${(props) =>
+    props.mode === "reduced" &&
+    css`
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    `}
 `;
 
-const LogoImg = styled.img<{ mode?: FooterPropsType["mode"] }>`
-  max-height: ${(props) => (props?.mode === "default" ? "var(--height-m)" : "var(--height-xxs)")};
+const LogoImg = styled.img<{ mode: FooterPropsType["mode"] }>`
+  max-height: ${(props) => (props.mode === "default" ? "var(--height-m)" : "var(--height-xxs)")};
   width: auto;
 `;
 
-const SocialAnchor = styled.a<{ index: number }>`
+const RightContainer = styled.div<{ width: number }>`
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-xl);
+  box-sizing: border-box;
+  padding: var(--spacing-padding-l) var(--spacing-padding-xl);
+
+  ${(props) =>
+    getResponsiveStyles.isMediumScreen(props.width) &&
+    css`
+      justify-content: flex-start;
+      padding: var(--spacing-padding-none);
+    `}
+`;
+const SocialLinks = styled.div`
+  height: var(--height-m);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-ml);
+`;
+
+const SocialAnchor = styled.a`
+  height: var(--height-s);
+  aspect-ratio: 1 / 1;
   border-radius: var(--border-radius-s);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-  &:focus {
+  &:focus,
+  &:focus-visible {
     outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
-    outline-offset: var(--border-width-m);
+    outline-offset: 0px;
   }
 `;
 
 const SocialIconContainer = styled.div`
   display: flex;
   align-items: center;
-  color: var(--color-fg-neutral-bright);
+  color: var(--color-fg-primary-strong);
   overflow: hidden;
-  font-size: var(--height-s);
+  font-size: var(--height-xs);
 
   svg {
-    height: var(--height-s);
-    width: 24px;
+    height: var(--height-xs);
+    width: var(--height-xs);
   }
 `;
 
-const BottomLinks = styled.div`
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-self: center;
-  margin-top: var(--spacing-padding-xs);
-  color: var(--color-fg-neutral-bright);
+const BottomContainer = styled.div<{ textColor: string; width: number }>`
+  width: 100%;
+  min-height: var(--height-xl);
+  display: grid;
+  grid-template-columns: 60% var(--spacing-gap-ml) 1fr;
+  align-items: center;
+  background-color: var(--color-bg-primary-strong);
+  color: ${({ textColor }) => textColor};
+  padding: var(--spacing-padding-none) var(--spacing-padding-xl);
+  box-sizing: border-box;
 
-  @media (min-width: ${responsiveSizes.small}rem) {
-    max-width: 60%;
-  }
-  @media (max-width: ${responsiveSizes.small}rem) {
-    max-width: 100%;
-    width: 100%;
+  ${(props) =>
+    getResponsiveStyles.isMediumScreen(props.width) &&
+    css`
+      grid-template-columns: 1fr;
+      gap: var(--spacing-gap-ml);
+      padding: var(--spacing-padding-m);
+    `}
+`;
+
+const BottomLinks = styled.div<{ textColor: string; width: number }>`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-left: var(--spacing-padding-xxxs);
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-body-s);
+  font-weight: var(--typography-label-regular);
+
+  ${(props) =>
+    getResponsiveStyles.isMediumScreen(props.width) &&
+    css`
+      max-width: 100%;
+      width: 100%;
+      flex-wrap: wrap;
+      overflow: visible;
+      padding-left: var(--spacing-padding-none);
+    `}
+
+  & > span {
+    white-space: nowrap;
   }
 
   & > span:not(:first-child):before {
     content: "·";
     padding: var(--spacing-padding-none) var(--spacing-padding-xs);
   }
+
+  & > span > a > span:hover,
+  & > span > a > span:active {
+    color: ${({ textColor }) => textColor};
+  }
 `;
 
-const BottomLink = styled.a`
-  text-decoration: none;
-  border-radius: var(--border-radius-xs);
+const Copyright = styled.div<{ width: number }>`
   font-family: var(--typography-font-family);
-  font-size: var(--typography-label-m);
+  font-size: var(--typography-label-s);
   font-weight: var(--typography-label-regular);
-  color: var(--color-fg-neutral-bright);
+  white-space: nowrap;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  grid-column-start: 3;
 
-  &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
-  }
+  ${(props) =>
+    getResponsiveStyles.isMediumScreen(props.width) &&
+    css`
+      justify-content: flex-start;
+      white-space: wrap;
+      grid-column-start: 1;
+    `}
 `;
 
-const getLogoElement = (mode: FooterPropsType["mode"], logo?: FooterPropsType["logo"]) => {
-  if (logo) {
-    return <LogoImg alt={logo.title} src={logo.src} title={logo.title} />;
-  } else {
-    return mode === "default" ? dxcLogo : dxcSmallLogo;
-  }
-};
-
 const DxcFooter = ({
   bottomLinks,
-  children,
   copyright,
+  leftContent,
   logo,
-  margin,
   mode = "default",
+  rightContent,
   socialLinks,
   tabIndex = 0,
 }: FooterPropsType): JSX.Element => {
   const translatedLabels = useContext(HalstackLanguageContext);
 
-  const footerLogo = getLogoElement(mode, logo);
+  const footerLogo = useMemo(() => {
+    if (logo) {
+      return <LogoImg mode={mode} alt={logo.alt} src={logo.src} title={logo.alt} />;
+    } else {
+      return mode === "default" ? dxcLogo : dxcSmallLogo;
+    }
+  }, [mode, logo]);
+
+  const footerRef = useRef<HTMLDivElement>(null);
+  const width = useWidth(footerRef);
+
+  const bottomContainerRef = useRef<HTMLDivElement>(null);
+  const [textColor, setTextColor] = useState("var(--color-fg-neutral-bright)");
+
+  useEffect(() => {
+    if (bottomContainerRef.current) {
+      const bg = window.getComputedStyle(bottomContainerRef.current).getPropertyValue("background-color").trim();
+      setTextColor(getContrastColor(bg));
+    }
+  }, []);
 
   return (
-    <FooterContainer margin={margin} mode={mode}>
-      <DxcFlex justifyContent="space-between" alignItems="center" wrap="wrap">
-        <LogoContainer mode={mode}>{footerLogo}</LogoContainer>
-        {mode === "default" && (
-          <DxcFlex gap="var(--spacing-gap-ml)">
-            {socialLinks?.map((link, index) => (
-              <Tooltip label={link.title} key={`social${index}${link.href}`}>
-                <SocialAnchor
-                  href={link.href}
-                  tabIndex={tabIndex}
-                  aria-label={link.title}
-                  key={`social${index}${link.href}`}
-                  index={index}
-                >
-                  <SocialIconContainer>
-                    {typeof link.logo === "string" ? <DxcIcon icon={link.logo} /> : link.logo}
-                  </SocialIconContainer>
-                </SocialAnchor>
-              </Tooltip>
-            ))}
-          </DxcFlex>
-        )}
-      </DxcFlex>
-      <ChildComponents>{children}</ChildComponents>
+    <FooterContainer ref={footerRef} mode={mode}>
       {mode === "default" && (
-        <BottomContainer>
-          <BottomLinks>
+        <MainContainer width={width}>
+          <LeftContainer width={width}>
+            <LogoContainer mode={mode}>{footerLogo}</LogoContainer>
+            {leftContent}
+          </LeftContainer>
+          {(socialLinks || rightContent) && (
+            <RightContainer width={width}>
+              {rightContent}
+              {socialLinks && (
+                <SocialLinks>
+                  {socialLinks?.map((link, index) => (
+                    <Tooltip label={link.title} key={`social${index}${link.href}`}>
+                      <SocialAnchor
+                        href={link.href}
+                        target="_blank"
+                        tabIndex={tabIndex}
+                        aria-label={link.title}
+                        key={`social${index}${link.href}`}
+                      >
+                        <SocialIconContainer>
+                          {typeof link.logo === "string" ? <DxcIcon icon={link.logo} /> : link.logo}
+                        </SocialIconContainer>
+                      </SocialAnchor>
+                    </Tooltip>
+                  ))}
+                </SocialLinks>
+              )}
+            </RightContainer>
+          )}
+        </MainContainer>
+      )}
+      <BottomContainer ref={bottomContainerRef} textColor={textColor} width={width}>
+        {mode === "default" && bottomLinks && (
+          <BottomLinks textColor={textColor} width={width}>
             {bottomLinks?.map((link, index) => (
               <span key={`bottom${index}${link.text}`}>
-                <BottomLink href={link.href} tabIndex={tabIndex}>
+                <DxcLink inheritColor href={link.href} tabIndex={tabIndex} newWindow>
                   {link.text}
-                </BottomLink>
+                </DxcLink>
               </span>
             ))}
           </BottomLinks>
-          <Copyright>{copyright ?? translatedLabels.footer.copyrightText(new Date().getFullYear())}</Copyright>
-        </BottomContainer>
-      )}
+        )}
+        {mode === "reduced" && <LogoContainer mode={mode}>{footerLogo}</LogoContainer>}
+        <Copyright width={width}>
+          {copyright ?? translatedLabels.footer.copyrightText(new Date().getFullYear())}
+        </Copyright>
+      </BottomContainer>
     </FooterContainer>
   );
 };
 
+const LeftContent = ({ children }: { children: ReactNode }) => <>{children}</>;
+const RightContent = ({ children }: { children: ReactNode }) => <>{children}</>;
+
+DxcFooter.LeftContent = LeftContent;
+DxcFooter.RightContent = RightContent;
 export default DxcFooter;
diff --git a/packages/lib/src/footer/Icons.tsx b/packages/lib/src/footer/Icons.tsx
index 6eb3b1bf4..718c39d8b 100644
--- a/packages/lib/src/footer/Icons.tsx
+++ b/packages/lib/src/footer/Icons.tsx
@@ -5,57 +5,57 @@ export const dxcLogo = (
       <path
         d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5"
         transform="translate(-68.528 65.45)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96"
         transform="translate(-77.56 65.45)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813"
         transform="translate(-86.019 65.583)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594"
         transform="translate(-95.903 65.45)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058"
         transform="translate(-105.869 65.45)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145"
         transform="translate(-115.631 65.583)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786"
         transform="translate(-126.654 65.45)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145"
         transform="translate(-135.016 65.583)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5"
         transform="translate(-145.284 65.583)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46"
         transform="translate(-154.162 65.45)"
-        fill="#fff"
+        fill="#6f4b97"
       />
       <path
         d="M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892"
         transform="translate(-21.08 69.298)"
-        fill="#fff"
+        fill="#6f4b97"
       />
     </g>
   </svg>
diff --git a/packages/lib/src/footer/types.ts b/packages/lib/src/footer/types.ts
index 881324c5d..2706fa804 100644
--- a/packages/lib/src/footer/types.ts
+++ b/packages/lib/src/footer/types.ts
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { SVG, Space } from "../common/utils";
+import { SVG } from "../common/utils";
 
 type SocialLink = {
   /**
@@ -28,10 +28,6 @@ type BottomLink = {
 };
 
 type Logo = {
-  /**
-   * URL to navigate when the logo is clicked.
-   */
-  href?: string;
   /**
    * Source of the logo image.
    */
@@ -39,7 +35,7 @@ type Logo = {
   /**
    * Alternative text for the logo image.
    */
-  title?: string;
+  alt: string;
 };
 
 type FooterPropsType = {
@@ -48,29 +44,28 @@ type FooterPropsType = {
    * the bottom part of the footer.
    */
   bottomLinks?: BottomLink[];
-  /**
-   * The center section of the footer. Can be used to render custom
-   * content in this area.
-   */
-  children?: ReactNode;
   /**
    * The text that will be displayed as copyright disclaimer.
    */
   copyright?: string;
   /**
-   * Logo to be displayed inside the footer
+   * Content to be displayed on the left side of the footer under the logo.
    */
-  logo?: Logo;
+  leftContent?: ReactNode;
   /**
-   * Size of the top margin to be applied to the footer.
+   * Logo to be displayed inside the footer
    */
-  margin?: Space;
+  logo?: Logo;
   /**
    * Determines the visual style and layout
    * - "default": The default mode with full content and styling.
    * - "reduced": A reduced mode with minimal content and styling.
    */
   mode?: "default" | "reduced";
+  /**
+   * Content to be displayed on the right side of the footer before the socialLinks if provided.
+   */
+  rightContent?: ReactNode;
   /**
    * An array of objects representing the links that will be rendered as
    * icons at the top-right side of the footer.
@@ -78,7 +73,7 @@ type FooterPropsType = {
   socialLinks?: SocialLink[];
   /**
    * Value of the tabindex for all interactive elements, except those
-   * inside the custom area.
+   * inside the leftContent and rightContent.
    */
   tabIndex?: number;
 };
diff --git a/packages/lib/src/footer/utils.ts b/packages/lib/src/footer/utils.ts
new file mode 100644
index 000000000..56c9f6d6e
--- /dev/null
+++ b/packages/lib/src/footer/utils.ts
@@ -0,0 +1,40 @@
+import { responsiveSizes } from "../common/variables";
+
+const rgbToHex = (color: string): string => {
+  const rgbMatch = color.match(/\d+/g);
+  if (!rgbMatch || rgbMatch.length < 3) return "#000000";
+  const [r, g, b] = rgbMatch.map(Number);
+  return (
+    "#" +
+    [r, g, b]
+      .map((x) => x!.toString(16).padStart(2, "0"))
+      .join("")
+      .toUpperCase()
+  );
+};
+
+function getLuminance(color: string): number {
+  const hex = color.startsWith("rgb") ? rgbToHex(color) : color;
+  const match = hex.replace("#", "").match(/.{2}/g);
+  if (!match || match.length < 3) return 0;
+
+  const rgb = match
+    .map((x) => parseInt(x, 16) / 255)
+    .map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
+
+  const [r, g, b] = rgb;
+  if (r == null || g == null || b == null) return 0;
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+export const getContrastColor = (bgColor: string) => {
+  const luminance = getLuminance(bgColor);
+  return luminance > 0.179 ? "var(--color-fg-neutral-dark)" : "var(--color-fg-neutral-bright)";
+};
+
+export const getResponsiveStyles = {
+  isSmallScreen: (width: number) => width <= Number(responsiveSizes.small) * 16,
+  isMediumScreen: (width: number) => width <= Number(responsiveSizes.medium) * 16,
+  isLargeScreen: (width: number) => width >= Number(responsiveSizes.medium) * 16,
+};
diff --git a/packages/lib/src/layout/Icons.tsx b/packages/lib/src/layout/Icons.tsx
index 93c6c2c2a..b9ff60f7a 100644
--- a/packages/lib/src/layout/Icons.tsx
+++ b/packages/lib/src/layout/Icons.tsx
@@ -7,7 +7,7 @@ const layoutIcons = {
       width="438.536px"
       height="438.536px"
       viewBox="0 0 438.536 438.536"
-      fill="#FFFFFF"
+      fill="currentColor"
     >
       <g>
         <path
@@ -23,10 +23,10 @@ const layoutIcons = {
   ),
   xLogo: (
     <svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="256" height="256" rx="40" fill="white" />
+      <rect width="256" height="256" rx="40" fill="currentColor" />
       <path
         d="M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z"
-        fill="#0F1419"
+        fill="white"
       />
     </svg>
   ),
@@ -38,7 +38,7 @@ const layoutIcons = {
       width="438.536px"
       height="438.536px"
       viewBox="0 0 438.536 438.536"
-      fill="#FFFFFF"
+      fill="currentColor"
     >
       <g>
         <path
diff --git a/packages/lib/src/link/Link.tsx b/packages/lib/src/link/Link.tsx
index dbbdab956..7af89b74f 100644
--- a/packages/lib/src/link/Link.tsx
+++ b/packages/lib/src/link/Link.tsx
@@ -56,7 +56,7 @@ const LinkContent = styled.span<{
     cursor: pointer;
   }
   &:active {
-    color: var(--color-fg-neutral-dark) !important;
+    color: var(--color-fg-neutral-dark);
   }
 `;