diff --git a/components/design-system/Button.jsx b/components/atoms/DSButton.js
similarity index 68%
rename from components/design-system/Button.jsx
rename to components/atoms/DSButton.js
index 65eaeb3d84..e5cf722d72 100644
--- a/components/design-system/Button.jsx
+++ b/components/atoms/DSButton.js
@@ -1,11 +1,37 @@
 import PropTypes from "prop-types";
 import { Image } from "./Image";
 
-export function Button(props) {
-  const style = "btn-" + props.styling;
+// Button used in HelpIcon.js and CTA.js
+// Use ActionButton.js for all other buttons in the app
+export function DSButton(props) {
+  //Styling for buttons and links
+  const PRIMARY =
+    "text-multi-neutrals-white bg-multi-blue-blue70 hover:bg-multi-blue-blue60g focus:bg-multi-blue-blue60g";
+  const SECONDARY =
+    "text-multi-blue-blue60b bg-multi-neutrals-grey30a hover:bg-multi-neutrals-grey50a focus:bg-multi-neutrals-grey60";
+  const SUPERTASK =
+    "text-multi-neutrals-white bg-specific-green-green50 hover:bg-specific-green-green70 focus:bg-sepcific-green-green70";
+  const DANGER =
+    "text-multi-neutrals-white bg-specific-red-red50 hover:bg-specific-red-red70 focus:bg-specific-red-red70";
+  const LINK =
+    "text-multi-blue-blue60c hover:text-multi-blue-blue50b focus:text-multi-blue-blue60f";
+
+  const styling =
+    props.styling === "primary"
+      ? PRIMARY
+      : props.styling === "secondary"
+      ? SECONDARY
+      : props.styling === "supertask"
+      ? SUPERTASK
+      : props.styling === "danger"
+      ? DANGER
+      : props.styling === "link"
+      ? LINK
+      : "";
+
   return props.href === "no ref" ? (
     <button
-      className={`flex flex-row ${style} focus:ring focus:ring-offset-4 ${props.className} `}
+      className={`flex flex-row px-[16px] py-[8px] ${styling} rounded-sm focus:ring focus:ring-offset-4 ${props.className} `}
       onClick={props.onClick}
       type={props.type}
       id={props.id}
@@ -18,7 +44,13 @@ export function Button(props) {
           <Image className="pr-2" src={props.icon} alt={props.iconAltText} />
         </span>
       ) : undefined}
-      {props.text}
+      <span
+        className={`grid place-items-center ${
+          props.styling === "supertask" ? "h-8" : ""
+        }`}
+      >
+        {props.text}
+      </span>
       {props.children}
       {props.icon && props.iconEnd ? (
         <span className="grid place-items-center h-8 w-8">
@@ -59,14 +91,14 @@ export function Button(props) {
   );
 }
 
-Button.defaultProps = {
+DSButton.defaultProps = {
   id: "btn1",
   styling: "supertask",
   text: "default",
   href: "no ref",
 };
 
-Button.propTypes = {
+DSButton.propTypes = {
   /**
    * Identify which button being clicked
    */
diff --git a/components/atoms/DSButton.stories.js b/components/atoms/DSButton.stories.js
new file mode 100644
index 0000000000..d3dc89b77c
--- /dev/null
+++ b/components/atoms/DSButton.stories.js
@@ -0,0 +1,61 @@
+import { DSButton } from "./DSButton";
+
+export default {
+  title: "Components/Atoms/DSButton",
+  component: DSButton,
+};
+
+const Template = (args) => <DSButton {...args} />;
+
+export const Supertask = Template.bind({});
+export const SupertaskIcon = Template.bind({});
+export const Primary = Template.bind({});
+export const Secondary = Template.bind({});
+export const Danger = Template.bind({});
+export const Link = Template.bind({});
+
+Supertask.args = {
+  id: "supertask",
+  styling: "supertask",
+  text: "Supertask button",
+  iconAltText: "supertask",
+};
+
+SupertaskIcon.args = {
+  id: "supertask_icon",
+  styling: "supertask",
+  text: "Supertask button",
+  icon: "plus.svg",
+  iconAltText: "icon",
+  iconEnd: false,
+};
+
+Primary.args = {
+  id: "primary",
+  text: "Primary button",
+  iconAltText: "prime",
+  styling: "primary",
+};
+
+Secondary.args = {
+  id: "secondary",
+  text: "Secondary Button",
+  iconEnd: false,
+  secondary: true,
+  styling: "secondary",
+};
+
+Danger.args = {
+  id: "danger",
+  text: "Danger Button",
+  iconEnd: false,
+  styling: "danger",
+};
+
+Link.args = {
+  id: "link",
+  text: "Link Button",
+  styling: "link",
+  href: "/",
+  iconAltText: "link",
+};
diff --git a/components/atoms/DSButton.test.js b/components/atoms/DSButton.test.js
new file mode 100644
index 0000000000..dee659371b
--- /dev/null
+++ b/components/atoms/DSButton.test.js
@@ -0,0 +1,69 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { axe, toHaveNoViolations } from "jest-axe";
+import {
+  Primary,
+  Secondary,
+  Danger,
+  Link,
+  Supertask,
+} from "./DSButton.stories";
+import { DSButton } from "./DSButton";
+
+expect.extend(toHaveNoViolations);
+
+describe("DSButton", () => {
+  it("renders supertask", async () => {
+    const { container } = render(<DSButton {...Supertask.args} />);
+    expect(screen.getByRole("button")).toHaveTextContent(Supertask.args.text);
+    expect(screen.getByRole("button")).toHaveClass(
+      "flex flex-row px-[16px] py-[8px] text-multi-neutrals-white bg-specific-green-green50 hover:bg-specific-green-green70 focus:bg-sepcific-green-green70 rounded-sm focus:ring focus:ring-offset-4 undefined"
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders primary", async () => {
+    const { container } = render(<DSButton {...Primary.args} />);
+    expect(screen.getByRole("button")).toHaveTextContent(Primary.args.text);
+    expect(screen.getByRole("button")).toHaveClass(
+      "flex flex-row px-[16px] py-[8px] text-multi-neutrals-white bg-multi-blue-blue70 hover:bg-multi-blue-blue60g focus:bg-multi-blue-blue60g rounded-sm focus:ring focus:ring-offset-4 undefined"
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders secondary", async () => {
+    const { container } = render(<DSButton {...Secondary.args} />);
+    expect(screen.getByRole("button")).toHaveTextContent(Secondary.args.text);
+    expect(screen.getByRole("button")).toHaveClass(
+      "flex flex-row px-[16px] py-[8px] text-multi-blue-blue60b bg-multi-neutrals-grey30a hover:bg-multi-neutrals-grey50a focus:bg-multi-neutrals-grey60 rounded-sm focus:ring focus:ring-offset-4 undefined"
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders danger", async () => {
+    const { container } = render(<DSButton {...Danger.args} />);
+    expect(screen.getByRole("button")).toHaveTextContent(Danger.args.text);
+    expect(screen.getByRole("button")).toHaveClass(
+      "flex flex-row px-[16px] py-[8px] text-multi-neutrals-white bg-specific-red-red50 hover:bg-specific-red-red70 focus:bg-specific-red-red70 rounded-sm focus:ring focus:ring-offset-4 undefined"
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders link styles as button", async () => {
+    const { container } = render(<DSButton {...Link.args} />);
+    expect(screen.getByRole("button")).toHaveTextContent(Link.args.text);
+    expect(screen.getByRole("button")).toHaveAttribute("href");
+    expect(screen.getByRole("button")).toHaveClass("btn-link");
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/design-system/Image.jsx b/components/atoms/Image.js
similarity index 100%
rename from components/design-system/Image.jsx
rename to components/atoms/Image.js
diff --git a/components/atoms/Image.stories.js b/components/atoms/Image.stories.js
new file mode 100644
index 0000000000..dd8a4f7b61
--- /dev/null
+++ b/components/atoms/Image.stories.js
@@ -0,0 +1,41 @@
+import { Image } from "./Image";
+
+export default {
+  title: "Components/Atoms/Image",
+  component: Image,
+};
+import imageFile from "../../public/image1.png";
+import imageFile2 from "../../public/image2.png";
+
+const Template = (args) => <Image {...args} />;
+
+export const Default = Template.bind({});
+export const Mobile = Template.bind({});
+export const DefaultWithRounded = Template.bind({});
+export const MobileWithRounded = Template.bind({});
+
+Default.args = {
+  id: "image",
+  alt: "Default Image",
+  src: imageFile,
+};
+
+DefaultWithRounded.args = {
+  id: "image",
+  alt: "Default Image with rounded",
+  rounded: "rounded",
+  src: imageFile,
+};
+
+Mobile.args = {
+  id: "image",
+  alt: "Mobile Image",
+  src: imageFile2,
+};
+
+MobileWithRounded.args = {
+  id: "image",
+  alt: "Mobile Image with rounded",
+  rounded: "rounded",
+  src: imageFile2,
+};
diff --git a/components/atoms/Image.test.js b/components/atoms/Image.test.js
new file mode 100644
index 0000000000..83aee6f03a
--- /dev/null
+++ b/components/atoms/Image.test.js
@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { axe, toHaveNoViolations } from "jest-axe";
+import {
+  Default,
+  Mobile,
+  DefaultWithRounded,
+  MobileWithRounded,
+} from "./Image.stories";
+import { Image } from "./Image";
+
+expect.extend(toHaveNoViolations);
+
+describe("Image", () => {
+  it("renders default image", async () => {
+    const { container } = render(<Image {...Default.args} />);
+    expect(screen.getByAltText("Default Image"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders mobile image", async () => {
+    const { container } = render(<Image {...Mobile.args} />);
+    expect(screen.getByAltText("Mobile Image"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders default image with rounded corner", async () => {
+    const { container } = render(<Image {...DefaultWithRounded.args} />);
+    expect(screen.getByAltText("Default Image with rounded")).toHaveClass(
+      "rounded"
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders mobile image with rounded", async () => {
+    const { container } = render(<Image {...MobileWithRounded.args} />);
+    expect(screen.getByAltText("Mobile Image with rounded")).toHaveClass(
+      "rounded"
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/design-system/Link.jsx b/components/atoms/Link.js
similarity index 97%
rename from components/design-system/Link.jsx
rename to components/atoms/Link.js
index 20a944786e..62fa643450 100644
--- a/components/design-system/Link.jsx
+++ b/components/atoms/Link.js
@@ -1,6 +1,8 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import PropTypes from "prop-types";
 
+// Use this component for Footer link and use Next.js <Link>
+// for all links within the site
 export function Link(props) {
   //Styling for links based on Figma Design
   let basicStyle = "";
diff --git a/components/atoms/Link.stories.js b/components/atoms/Link.stories.js
new file mode 100644
index 0000000000..abc4af0ed9
--- /dev/null
+++ b/components/atoms/Link.stories.js
@@ -0,0 +1,56 @@
+import { Link } from "./Link";
+
+export default {
+  title: "Components/Atoms/Link",
+  component: Link,
+};
+
+const Template = (args) => <Link {...args} />;
+
+export const Default = Template.bind({});
+export const RegularLinkwithEmphasis = Template.bind({});
+export const TitleLink = Template.bind({});
+export const FooterBlueLink = Template.bind({});
+export const BreadcrumbsLink = Template.bind({});
+export const CardActionLink = Template.bind({});
+
+Default.args = {
+  id: "link",
+  text: "Regular Link",
+  href: "/",
+};
+
+RegularLinkwithEmphasis.args = {
+  id: "link",
+  text: "Regular link with Emphasis",
+  href: "/",
+  linkStyle: "basicStyleWithEmphasis",
+};
+
+TitleLink.args = {
+  id: "link",
+  text: "Title Link",
+  href: "/",
+  linkStyle: "titleLink",
+};
+
+FooterBlueLink.args = {
+  id: "link",
+  text: "Small link - Footer blue",
+  href: "/",
+  linkStyle: "smfooterBlue",
+};
+
+BreadcrumbsLink.args = {
+  id: "link",
+  text: "Small link - Breadcrumbs & French toggle",
+  href: "/",
+  linkStyle: "smBreadcrumbs",
+};
+
+CardActionLink.args = {
+  id: "link",
+  text: "Card Action Link",
+  href: "/",
+  linkStyle: "cardActionLink",
+};
diff --git a/components/atoms/Link.test.js b/components/atoms/Link.test.js
new file mode 100644
index 0000000000..b533a82c8d
--- /dev/null
+++ b/components/atoms/Link.test.js
@@ -0,0 +1,99 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { axe, toHaveNoViolations } from "jest-axe";
+import {
+  Default,
+  RegularLinkwithEmphasis,
+  FooterBlueLink,
+  TitleLink,
+  CardActionLink,
+  BreadcrumbsLink,
+} from "./Link.stories";
+import { Link } from "./Link";
+
+expect.extend(toHaveNoViolations);
+
+describe("Link", () => {
+  let mockFn;
+  beforeEach(() => {
+    mockFn = jest.fn();
+  });
+  afterEach(() => {
+    mockFn.mockRestore();
+  });
+  it("renders regular style link", () => {
+    render(<Link {...Default.args} />);
+    expect(screen.getByText("Regular Link")).toHaveTextContent(
+      Default.args.text
+    );
+    expect(screen.getByRole("link")).toHaveClass(
+      "underline text-multi-blue-blue70b font-body text-browserh5 leading-33px hover:text-multi-blue-blue50b"
+    );
+    expect(screen.getByLabelText(Default.args.text)).toBeInTheDocument();
+  });
+
+  it("renders regular link with emphasis", () => {
+    render(<Link {...RegularLinkwithEmphasis.args} />);
+    expect(screen.getByText("Regular link with Emphasis")).toHaveTextContent(
+      RegularLinkwithEmphasis.args.text
+    );
+    expect(screen.getByRole("link")).toHaveClass(
+      "underline text-multi-blue-blue70b font-body text-browserh5 font-bold text-mobileh5 leading-33px hover:text-multi-blue-blue50b"
+    );
+    expect(
+      screen.getByLabelText(RegularLinkwithEmphasis.args.text)
+    ).toBeInTheDocument();
+  });
+
+  it("renders Title link", () => {
+    render(<Link {...TitleLink.args} />);
+    expect(screen.getByText("Title Link")).toHaveTextContent(
+      TitleLink.args.text
+    );
+    expect(screen.getByRole("link")).toHaveClass(
+      "underline text-multi-blue-blue70b font-header text-browserh5 leading-23px font-bold hover:text-multi-blue-blue50b"
+    );
+    expect(screen.getByLabelText(TitleLink.args.text)).toBeInTheDocument();
+  });
+
+  it("renders Card Action link", () => {
+    render(<Link {...CardActionLink.args} />);
+    expect(screen.getByText("Card Action Link")).toHaveTextContent(
+      CardActionLink.args.text
+    );
+    expect(screen.getByRole("link")).toHaveClass(
+      "text-multi-blue-blue70b font-body text-browserh5 underline leading-28px font-regular hover:text-multi-blue-blue50b"
+    );
+    expect(screen.getByLabelText(CardActionLink.args.text)).toBeInTheDocument();
+  });
+
+  it("renders Small link - Footer Blue", () => {
+    render(<Link {...FooterBlueLink.args} />);
+    expect(screen.getByText("Small link - Footer blue")).toHaveTextContent(
+      FooterBlueLink.args.text
+    );
+    expect(screen.getByRole("link")).toHaveClass(
+      "text-multi-blue-blue70b font-body leading-20px text-browserh7 hover:underline"
+    );
+    expect(screen.getByLabelText(FooterBlueLink.args.text)).toBeInTheDocument();
+  });
+
+  it("renders breadcrumb link", () => {
+    render(<Link {...BreadcrumbsLink.args} />);
+    expect(
+      screen.getByText("Small link - Breadcrumbs & French toggle")
+    ).toHaveTextContent(BreadcrumbsLink.args.text);
+    expect(screen.getByRole("link")).toHaveClass(
+      "text-multi-blue-blue70b font-body text-browserh8 leading-23px font-regular hover:text-multi-blue-blue50b"
+    );
+    expect(
+      screen.getByLabelText(BreadcrumbsLink.args.text)
+    ).toBeInTheDocument();
+  });
+  it("has no a11y violations", async () => {
+    const { container } = render(<Default {...Default.args} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/atoms/ProjectInfo.js b/components/atoms/ProjectInfo.js
index 963c7c0ff2..e08fa4f2a4 100644
--- a/components/atoms/ProjectInfo.js
+++ b/components/atoms/ProjectInfo.js
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { HelpIcon } from "../design-system/HelpIcon";
+import { HelpIcon } from "../organisms/HelpIcon";
 
 export function ProjectInfo(props) {
   return (
diff --git a/components/design-system/Footer.jsx b/components/design-system/Footer.jsx
deleted file mode 100644
index c4cfaeac88..0000000000
--- a/components/design-system/Footer.jsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/* eslint-disable no-prototype-builtins */
-import PropTypes from "prop-types";
-import { MainBand } from "./MainBand";
-import { SubFooterBand } from "./SubFooterBand";
-
-let landscapeLinkKeys = [
-  "contacts",
-  "departments",
-  "about",
-  "jobs",
-  "taxes",
-  "canadaAndWorld",
-  "immigration",
-  "environment",
-  "finance",
-  "travel",
-  "nationalSecurity",
-  "innovation",
-  "business",
-  "culture",
-  "indigenous",
-  "benefit",
-  "policing",
-  "veterans",
-  "health",
-  "transport",
-  "youth",
-];
-
-export function Footer(props) {
-  const {
-    error,
-    lang,
-    id,
-    isAuthenticated,
-    brandLinks,
-    target,
-    onClick,
-    btnLink,
-  } = props;
-
-  return (
-    <footer id={id}>
-      <div
-        className="bg-multi-blue-blue70 bg-no-repeat bg-clip-border sm:bg-right-bottom bg-bottom"
-        style={{
-          backgroundImage: `url(/footer_bg_img.svg)`,
-        }}
-      >
-        <section className="lg:container mx-auto px-6">
-          <MainBand
-            lang={lang}
-            landscapeLinks={landscapeLinkKeys}
-            target={target}
-          />
-        </section>
-      </div>
-      <SubFooterBand
-        lang={lang}
-        isAuthenticated={isAuthenticated}
-        container="container"
-        brandLinks={brandLinks}
-        onClick={onClick}
-        target={target}
-        logo="/wmms-blk.svg"
-        error={error}
-        btnLink={btnLink}
-      />
-    </footer>
-  );
-}
-
-Footer.defaultProps = {
-  lang: "en",
-  contactLink: "https://www.canada.ca/en/contact.html",
-  withMainBand: true,
-};
-
-Footer.propTypes = {
-  /**
-   * id of this component
-   */
-  id: PropTypes.string.isRequired,
-  /**
-   * isAuthenticated: bool to switch between authenticated and non authenticated menus
-   **/
-  isAuthenticated: PropTypes.bool,
-  /**
-   * Switch between english and french footer. Pass in "en" or "fr"
-   */
-  lang: PropTypes.oneOf(["en", "fr"]),
-  /**
-   * Add the path Link to the top of your page for the "to the Top" button in mobile
-   */
-  btnLink: PropTypes.string.isRequired,
-
-  /**
-   * containerClass: Customized container class name. If pass a existing class name, then 'ds-container' will be
-   * replaced by the passed in class name.
-   **/
-  containerClass: PropTypes.string,
-
-  /**
-   * If true will display the error page version of the footer component
-   */
-  error: PropTypes.bool,
-
-  /**
-   * Allow user to pass in their own contact link
-   */
-  contactLink: PropTypes.string,
-
-  /**
-   * List of links to display on the footer
-   */
-  brandLinks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      text: PropTypes.string,
-      href: PropTypes.string,
-    })
-  ),
-
-  /**
-   * Specifies where to open the linked document
-   */
-  target: PropTypes.string,
-
-  /**
-   * Handle onclick on the footer media link
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * List of menu items to display in dropdown with links
-   */
-  contextualBandLinks: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string,
-      text: PropTypes.string,
-      link: PropTypes.string,
-    })
-  ),
-};
diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.js b/components/fragment_renderer/fragment_components/ArticleCTA.js
index 96af6994e6..27e9cdddf2 100644
--- a/components/fragment_renderer/fragment_components/ArticleCTA.js
+++ b/components/fragment_renderer/fragment_components/ArticleCTA.js
@@ -1,4 +1,4 @@
-import { CTA } from "../../design-system/CTA";
+import { CTA } from "../../molecules/CTA";
 import TextRender from "../../text_node_renderer/TextRender";
 
 export default function ArticleCTA(props) {
diff --git a/components/design-system/CTA.jsx b/components/molecules/CTA.js
similarity index 88%
rename from components/design-system/CTA.jsx
rename to components/molecules/CTA.js
index e5f2a851a9..4096eb99ee 100644
--- a/components/design-system/CTA.jsx
+++ b/components/molecules/CTA.js
@@ -1,6 +1,6 @@
-import { Button } from "./Button";
-import { Link } from "./Link";
-import { Image } from "./Image";
+import { DSButton } from "../atoms/DSButton";
+import { Link } from "../atoms/Link";
+import { Image } from "../atoms/Image";
 
 export function CTA({
   heading,
@@ -27,7 +27,7 @@ export function CTA({
             {heading}
           </h3>
           {isHTML(body) ? body : <p className="body">{body}</p>}
-          <Button
+          <DSButton
             styling="primary"
             className="my-3"
             type="button"
diff --git a/components/molecules/CTA.stories.js b/components/molecules/CTA.stories.js
new file mode 100644
index 0000000000..7b48d33599
--- /dev/null
+++ b/components/molecules/CTA.stories.js
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { CTA } from "./CTA";
+export default {
+  title: "Components/Molecules/CTA",
+  component: CTA,
+};
+
+const Template = (args) => <CTA {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: "This is a call-to-action!",
+  body: "This sentence explains the action we want the users to take.",
+  ButtonProps: {
+    text: "Action Button",
+  },
+  LinkProps: {
+    id: "privacy-policy",
+    text: "Review the Privacy Policy",
+  },
+};
+
+export const WithoutLink = Template.bind({});
+WithoutLink.args = {
+  heading: "This is a call-to-action!",
+  body: "This sentence explains the action we want the users to take.",
+  ButtonProps: {
+    text: "Action Button",
+  },
+};
diff --git a/components/molecules/CTA.test.js b/components/molecules/CTA.test.js
new file mode 100644
index 0000000000..643b699bae
--- /dev/null
+++ b/components/molecules/CTA.test.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { Default, WithoutLink } from "./CTA.stories";
+import "@testing-library/jest-dom/extend-expect";
+import { axe, toHaveNoViolations } from "jest-axe";
+import { render, screen } from "@testing-library/react";
+
+expect.extend(toHaveNoViolations);
+
+describe("CTA", () => {
+  it("renders and formats the date properly", () => {
+    render(<Default {...Default.args} />);
+    screen.getByText("Action Button");
+  });
+
+  it("renders and formats the date properly", () => {
+    render(<WithoutLink {...WithoutLink.args} />);
+    screen.getByText("This is a call-to-action!");
+  });
+
+  it("has no a11y violations", async () => {
+    const { container } = render(<Default {...Default.args} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/molecules/CallToAction.js b/components/molecules/CallToAction.js
deleted file mode 100644
index d3a049d6c6..0000000000
--- a/components/molecules/CallToAction.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import PropTypes from "prop-types";
-import { ActionButton } from "../atoms/ActionButton";
-import Link from "next/link";
-import { useTranslation } from "next-i18next";
-
-/**
- * A section that will have a title, small description, and a link to some action we want to user to make
- */
-export function CallToAction(props) {
-  const { t } = useTranslation("common");
-  return (
-    <div className="bg-[#ebf2fc] text-[#333] my-12">
-      <div className="layout-container pb-10 pt-10 text-sm md:text-base">
-        <div>
-          <div className="flex flex-col">
-            <div className="flex -my-2">
-              <img
-                className="mb-2 -ml-4"
-                src="/cta_icon.svg"
-                alt=""
-                width="60"
-                height="53"
-              />
-              <h3 className="lg:text-h1 ml-2">
-                <>{props.title}</>
-              </h3>
-            </div>
-            <aside className="pt-3 border-l-2 ml-2 lg:ml-3.5 border-custom-blue-blue xl:w-3/4">
-              {props.description ? (
-                <div className="pl-4">
-                  <p className="text-base lg:text-p ml-6 pb-3 whitespace-pre-line">
-                    {props.description}
-                  </p>
-                  <p className="text-base lg:text-p ml-6 pb-3 whitespace-pre-line">
-                    {props.disclaimer}
-                  </p>
-                </div>
-              ) : (
-                <div
-                  className="text-base lg:text-p ml-6 pb-3 whitespace-pre-line"
-                  dangerouslySetInnerHTML={{ __html: props.html }}
-                />
-              )}
-              <div className="ml-6">
-                <p className="flex mb-4 pl-4 text-center">
-                  <ActionButton
-                    id="become-a-participant-btn"
-                    custom={`py-1.5 px-3 rounded text-white text-base lg:text-p font-display bg-custom-blue-dark hover:bg-custom-blue-light border border-custom-blue-darker active:bg-custom-blue-darker hover:ring-2 hover:ring-white`}
-                    className=""
-                    href={props.href}
-                    text={props.hrefText}
-                    expandIcon={
-                      props.feedbackActive ? (
-                        <img
-                          className="px-2"
-                          src="/feedback-icon-white.svg"
-                          alt=""
-                        />
-                      ) : undefined
-                    }
-                    onClick={props.feedbackActive ? props.clicked : undefined}
-                    ariaExpanded={props.ariaExpanded}
-                  />
-                </p>
-                {props.showPrivacyLink && (
-                  <Link href={t("privacyRedirect")} locale={props.lang}>
-                    <a className="pl-4 text-base lg:text-p underline flex xl:inline lg:mr-10">
-                      {t("privacyLinkText")}
-                    </a>
-                  </Link>
-                )}
-              </div>
-            </aside>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-CallToAction.propTypes = {
-  /**
-   * title of the call to action
-   */
-  title: PropTypes.string.isRequired,
-
-  /**
-   * a short description about what the call to action is about - string format
-   */
-  description: PropTypes.string,
-  /**
-   * a short disclaimer after the description - ie. for a sign up banner an explanation that participation is voluntary
-   */
-  disclaimer: PropTypes.string,
-
-  /**
-   * a short description about what the call to action is about - html format
-   */
-  html: PropTypes.string,
-
-  /**
-   * the url to the action
-   */
-  href: PropTypes.string.isRequired,
-
-  /**
-   * url text to be displayed
-   */
-  hrefText: PropTypes.string.isRequired,
-
-  /**
-   * Aria expanded state
-   */
-  ariaExpanded: PropTypes.string,
-
-  /**
-   * Show or hide privacy link
-   */
-  showPrivacyLink: PropTypes.bool,
-};
diff --git a/components/molecules/CallToAction.stories.js b/components/molecules/CallToAction.stories.js
deleted file mode 100644
index 024dc056aa..0000000000
--- a/components/molecules/CallToAction.stories.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { CallToAction } from "./CallToAction";
-
-export default {
-  title: "Components/Molecules/CallToAction",
-  component: CallToAction,
-};
-
-const Template = (args) => <CallToAction {...args} />;
-
-export const Primary = Template.bind({});
-export const Secondary = Template.bind({});
-Primary.args = {
-  title: "the title",
-  description: "a description that should be short and concise",
-  href: "#",
-  hrefText: "the link text",
-};
-
-Secondary.args = {
-  title: "the title",
-  html: "<h1>Title</h1><p>Text</p>",
-  href: "#",
-  hrefText: "the link text",
-};
diff --git a/components/molecules/CallToAction.test.js b/components/molecules/CallToAction.test.js
deleted file mode 100644
index 1311f3e2d4..0000000000
--- a/components/molecules/CallToAction.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-import { Primary, Secondary } from "./CallToAction.stories";
-import { axe, toHaveNoViolations } from "jest-axe";
-
-expect.extend(toHaveNoViolations);
-
-jest.mock("next/link", () => {
-  return ({ children }) => {
-    return children;
-  };
-});
-
-describe("CallToAction", () => {
-  it("renders component correctly", () => {
-    render(<Primary {...Primary.args} />);
-    screen.getByText(Primary.args.title);
-    screen.getByText(Primary.args.description);
-    screen.getByText(Primary.args.hrefText);
-  });
-
-  it("renders the html content with some text", () => {
-    render(<Secondary {...Secondary.args} />);
-    screen.getByText(Secondary.args.title);
-    screen.getByText("Title");
-    screen.getByText("Text");
-    screen.getByText(Secondary.args.hrefText);
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Primary {...Primary.args} />);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});
diff --git a/components/design-system/Collapse.jsx b/components/molecules/Collapse.js
similarity index 100%
rename from components/design-system/Collapse.jsx
rename to components/molecules/Collapse.js
diff --git a/components/molecules/Collapse.stories.js b/components/molecules/Collapse.stories.js
new file mode 100644
index 0000000000..8aa87756d1
--- /dev/null
+++ b/components/molecules/Collapse.stories.js
@@ -0,0 +1,36 @@
+import React from "react";
+import { Collapse } from "./Collapse";
+
+export default {
+  title: "Components/Molecules/Collapse",
+  component: Collapse,
+};
+
+const Template = (args) => <Collapse {...args} />;
+
+export const TextDescription = Template.bind({});
+TextDescription.args = {
+  id: "collapseId",
+  title: "Example title",
+  children: "Example description",
+  dataTestId: "/placeholderImg",
+};
+
+export const HtmlDescription = Template.bind({});
+HtmlDescription.args = {
+  id: "collapseId",
+  title: "Example title",
+  children: [
+    <p>First paragraph tag</p>,
+    <p>Second paragprahp tag</p>,
+    <ul>
+      <li>Unorderded list item 1</li>
+      <li>Unorderded list item 2</li>
+    </ul>,
+    <ol>
+      <li>Ordered list item 1</li>
+      <li>Ordered list item 2</li>
+    </ol>,
+  ],
+  dataTestId: "exampleTestId",
+};
diff --git a/components/molecules/Collapse.test.js b/components/molecules/Collapse.test.js
new file mode 100644
index 0000000000..3b471a282e
--- /dev/null
+++ b/components/molecules/Collapse.test.js
@@ -0,0 +1,42 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { axe, toHaveNoViolations } from "jest-axe";
+import { TextDescription } from "./Collapse.stories";
+import { HtmlDescription } from "./Collapse.stories";
+
+expect.extend(toHaveNoViolations);
+
+describe("Collapse component", () => {
+  it("renders Collapse with string content", async () => {
+    const { container } = render(<TextDescription {...TextDescription.args} />);
+    const titleElement = screen.findByText("Example title");
+    const descriptionElement = screen.findByText("Example description");
+    expect(titleElement).toBeTruthy();
+    expect(descriptionElement).toBeTruthy();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("renders Collapse with html content", async () => {
+    const { container } = render(<HtmlDescription {...HtmlDescription.args} />);
+    const titleElement = await screen.findByText("Example title");
+    const descriptionParagraphElement = await screen.findByText(
+      "First paragraph tag"
+    );
+    const descriptionUnorderedListElement = await screen.findByText(
+      "Unorderded list item 1"
+    );
+    const descriptionOrderedListElement = await screen.findByText(
+      "Ordered list item 1"
+    );
+    expect(titleElement).toBeTruthy();
+    expect(descriptionParagraphElement).toBeTruthy();
+    expect(descriptionUnorderedListElement).toBeTruthy();
+    expect(descriptionOrderedListElement).toBeTruthy();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/design-system/ContextualAlert.jsx b/components/molecules/ContextualAlert.js
similarity index 100%
rename from components/design-system/ContextualAlert.jsx
rename to components/molecules/ContextualAlert.js
diff --git a/components/molecules/ContextualAlert.stories.js b/components/molecules/ContextualAlert.stories.js
new file mode 100644
index 0000000000..fd7a916030
--- /dev/null
+++ b/components/molecules/ContextualAlert.stories.js
@@ -0,0 +1,70 @@
+import { ContextualAlert } from "./ContextualAlert";
+export default {
+  title: "Components/Molecules/ContextualAlert",
+  component: ContextualAlert,
+};
+
+const Template = (args) => <ContextualAlert {...args} />;
+
+export const Success = Template.bind({});
+export const Info = Template.bind({});
+export const Warning = Template.bind({});
+export const Danger = Template.bind({});
+
+Success.args = {
+  id: "success",
+  type: "success",
+  message_heading: "COVID-19 New services and service changes",
+  message_body: [
+    <p>
+      Find out about new support for Canadians during the COVID-19 pandemic and
+      how Service Canada’s services are affectedFind out about new support for
+      Canadians during the COVID-19 pandemic and how Service Canada’s services
+      are affected
+      <a href="https://healthycanadians.gc.ca/video/suspect-eng.php#trans">
+        Transcript
+      </a>
+    </p>,
+  ],
+  alert_icon_alt_text: "success icon",
+  alert_icon_id: "success icon",
+};
+
+Info.args = {
+  id: "info",
+  type: "info",
+  message_heading: "COVID-19 New services and service changes",
+  message_body:
+    "Find out about new support for Canadians during the COVID-19 pandemic and how Service Canada’s services are affectedFind out about new support for Canadians during the COVID-19 pandemic and how Service Canada’s services are affected",
+  alert_icon_alt_text: "info icon",
+  alert_icon_id: "info icon",
+};
+
+Warning.args = {
+  id: "warning",
+  type: "warning",
+  message_heading: "COVID-19 New services and service changes",
+  message_body:
+    "Find out about new support for Canadians during the COVID-19 pandemic and how Service Canada’s services are affectedFind out about new support for Canadians during the COVID-19 pandemic and how Service Canada’s services are affected",
+  alert_icon_alt_text: "warning",
+  alert_icon_id: "warning icon",
+};
+
+Danger.args = {
+  id: "danger",
+  type: "danger",
+  message_heading: "COVID-19 New services and service changes",
+  message_body: [
+    <p>
+      Find out about new support for Canadians during the COVID-19 pandemic and
+      how Service Canada’s services are affectedFind out about new support for
+      Canadians during the COVID-19 pandemic and how Service Canada’s services
+      are affected
+      <a href="https://healthycanadians.gc.ca/video/suspect-eng.php#trans">
+        Transcript
+      </a>
+    </p>,
+  ],
+  alert_icon_alt_text: "danger icon",
+  alert_icon_id: "danger icon",
+};
diff --git a/components/molecules/ContextualAlert.test.js b/components/molecules/ContextualAlert.test.js
new file mode 100644
index 0000000000..ea1873b62a
--- /dev/null
+++ b/components/molecules/ContextualAlert.test.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { axe, toHaveNoViolations } from "jest-axe";
+import { Success, Warning, Info, Danger } from "./ContextualAlert.stories.js";
+
+expect.extend(toHaveNoViolations);
+
+describe("ContextualAlert", () => {
+  it("renders alert image", () => {
+    render(<Success {...Success.args} />);
+    expect(screen.getByAltText("success icon"));
+  });
+  it("has no a11y Success", async () => {
+    const { container } = render(<Success {...Success.args} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("has no a11y Warnsing", async () => {
+    const { container } = render(<Warning {...Warning.args} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("has no a11y Danger", async () => {
+    const { container } = render(<Danger {...Danger.args} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("has no a11y Info", async () => {
+    const { container } = render(<Info {...Info.args} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/design-system/Heading.jsx b/components/molecules/Heading.js
similarity index 100%
rename from components/design-system/Heading.jsx
rename to components/molecules/Heading.js
diff --git a/components/molecules/Heading.stories.js b/components/molecules/Heading.stories.js
new file mode 100644
index 0000000000..0ad28e0277
--- /dev/null
+++ b/components/molecules/Heading.stories.js
@@ -0,0 +1,23 @@
+import { Heading } from "./Heading";
+
+export default {
+  title: "Components/Molecules/Heading",
+  component: Heading,
+};
+
+const Template = (args) => <Heading {...args} />;
+
+export const Default = Template.bind({});
+export const withFromLink = Template.bind({});
+
+Default.args = {
+  title: "Default Heading",
+  id: "withoutLink",
+};
+
+withFromLink.args = {
+  title: "Heading with from link",
+  fromLink: "https://www.google.com",
+  fromText: "Google",
+  id: "withLink",
+};
diff --git a/components/molecules/Heading.test.js b/components/molecules/Heading.test.js
new file mode 100644
index 0000000000..8e52cca6a3
--- /dev/null
+++ b/components/molecules/Heading.test.js
@@ -0,0 +1,31 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { axe, toHaveNoViolations } from "jest-axe";
+import { Default, withFromLink } from "./Heading.stories";
+import { Heading } from "./Heading";
+
+expect.extend(toHaveNoViolations);
+
+describe("Heading", () => {
+  it("renders default", () => {
+    render(<Heading {...Default.args} />);
+    expect(screen.getByText("Default Heading")).toHaveTextContent(
+      Default.args.title
+    );
+  });
+
+  it("renders with from link", () => {
+    render(<Heading {...withFromLink.args} />);
+    expect(screen.getByText("Google")).toHaveAttribute("href");
+  });
+
+  it("has no a11y violations", async () => {
+    const { container } = render(<Heading {...Default.args} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/design-system/MainBand.jsx b/components/molecules/MainBand.js
similarity index 97%
rename from components/design-system/MainBand.jsx
rename to components/molecules/MainBand.js
index 0972deb1d5..788915d0ad 100644
--- a/components/design-system/MainBand.jsx
+++ b/components/molecules/MainBand.js
@@ -1,4 +1,4 @@
-import { Link } from "./Link";
+import { Link } from "../atoms/Link";
 import { useTranslation } from "next-i18next";
 
 export function MainBand(props) {
diff --git a/components/design-system/SubFooterBand.jsx b/components/molecules/SubFooterBand.js
similarity index 81%
rename from components/design-system/SubFooterBand.jsx
rename to components/molecules/SubFooterBand.js
index fd45ff9be3..229d97c48a 100644
--- a/components/design-system/SubFooterBand.jsx
+++ b/components/molecules/SubFooterBand.js
@@ -1,5 +1,28 @@
-import { Link } from "./Link";
-import { Image } from "./Image";
+import { Link } from "../atoms/Link";
+import { Image } from "../atoms/Image";
+
+const brandLinksDefault = [
+  {
+    href: "https://www.canada.ca/en/social.html",
+    text: "Social media",
+  },
+  {
+    href: "https://www.canada.ca/en/mobile.html",
+    text: "Mobile applications",
+  },
+  {
+    href: "https://www.canada.ca/en/government/about.html",
+    text: "About Canada.ca",
+  },
+  {
+    href: "https://www.canada.ca/en/transparency/terms.html",
+    text: "Terms and conditions",
+  },
+  {
+    href: "https://www.canada.ca/en/transparency/privacy.html",
+    text: "Privacy",
+  },
+];
 
 export function SubFooterBand(props) {
   return (
@@ -31,7 +54,7 @@ export function SubFooterBand(props) {
                           key={index}
                           className={`${
                             index === 0 ? "" : "md:list-disc"
-                          } pr-4 mb-[17px] list-inside list-none text-xxs ml-0`}
+                          } pr-4 mb-[17px] list-inside list-none text-xxs ml-6`}
                         >
                           <Link
                             onClick={onClick ? onClick : undefined}
@@ -44,13 +67,13 @@ export function SubFooterBand(props) {
                         </li>
                       );
                     })
-                  : props.brandLinksDefault.map(({ href, text }, index) => {
+                  : brandLinksDefault.map(({ href, text }, index) => {
                       return (
                         <li
                           key={index}
                           className={`${
                             index === 0 ? "" : "md:list-disc"
-                          } pr-4 mb-[17px] list-inside list-none text-xxs`}
+                          } pr-4 mb-[17px] list-inside list-none text-xxs ml-6`}
                         >
                           <Link
                             onClick={props.onClick ? props.onClick : undefined}
diff --git a/components/organisms/Footer.js b/components/organisms/Footer.js
index 9bf4513c1f..cf4892dee1 100644
--- a/components/organisms/Footer.js
+++ b/components/organisms/Footer.js
@@ -1,118 +1,112 @@
+/* eslint-disable no-prototype-builtins */
 import PropTypes from "prop-types";
-import { ActionButton } from "../atoms/ActionButton";
+import { MainBand } from "../molecules/MainBand";
+import { SubFooterBand } from "../molecules/SubFooterBand";
 
-/**
- * footer element for all pages
- */
+const landscapeLinkKeys = [
+  "contacts",
+  "departments",
+  "about",
+  "jobs",
+  "taxes",
+  "canadaAndWorld",
+  "immigration",
+  "environment",
+  "finance",
+  "travel",
+  "nationalSecurity",
+  "innovation",
+  "business",
+  "culture",
+  "indigenous",
+  "benefit",
+  "policing",
+  "veterans",
+  "health",
+  "transport",
+  "youth",
+];
 
-export function Footer(props) {
+export const Footer = ({ error, id, brandLinks, target, onClick, btnLink }) => {
   return (
-    <div className="w-full">
-      <div className="w-full h-auto footerBackground bg-custom-blue-dark">
-        <div
-          className="w-full py-7 layout-container"
-          role="navigation"
-          aria-labelledby="footerNav1"
-        >
-          <h3 className="sr-only" id="footerNav1">
-            {props.footerNav1}
-          </h3>
-          <ul className="flex flex-col text-xs lg:grid lg:grid-cols-2 xl:grid xl:grid-cols-3 lg:gap-1 -ml-4">
-            {" "}
-            {props.footerBoxLinks.map((value, index) => {
-              return (
-                <li
-                  key={index}
-                  className="text-xs text-white w-64 lg:w-80 my-2.5 hover:underline list-none"
-                >
-                  <a className="font-body" href={value.footerBoxlink}>
-                    {value.footerBoxLinkText}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
+    <footer id={id} data-testid="footer">
+      <div
+        className="bg-multi-blue-blue70 bg-no-repeat bg-clip-border sm:bg-right-bottom bg-bottom"
+        style={{
+          backgroundImage: `url(/footer_bg_img.svg)`,
+        }}
+      >
+        <section className="lg:container mx-auto px-6">
+          <MainBand landscapeLinks={landscapeLinkKeys} target={target} />
+        </section>
       </div>
-      <div className="w-full h-full bg-footer-background-color pb-4">
-        <div className="h-auto bg-footer-white pt-5 layout-container flex flex-col xl:flex xl:flex-row md:justify-between">
-          <div
-            className="mt-3.5 xl:mt-5"
-            role="navigation"
-            aria-labelledby="footerNav2"
-          >
-            <h3 className="sr-only" id="footerNav2">
-              {props.footerNav2}
-            </h3>
-            <ul className="flex flex-col md:grid md:grid-cols-2 xl:flex lg:flex-row -ml-4">
-              {props.links.map((value, index) => {
-                return (
-                  <li
-                    key={index}
-                    className={
-                      index === 0
-                        ? "lg:mb-4 mb-5 lg:list-inside list-disc xl:list-none text-xxs"
-                        : "lg:mb-4 mb-5 lg:list-inside list-disc text-xxs"
-                    }
-                  >
-                    <a
-                      className="text-xs font-body hover:text-canada-footer-hover-font-blue text-canada-footer-font"
-                      data-cy="social-media-link"
-                      href={value.link}
-                    >
-                      {value.linkText}
-                    </a>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-          <div className="flex items-center justify-between">
-            <ActionButton
-              id="TopOfPageButton"
-              href="#"
-              custom="text-left w-32 flex flex-col lg:hidden"
-              text={props.topOfPage}
-              icon="icon-up-caret"
-              iconEnd
-            />
-            <span className="flex relative footer-logo">
-              <img src={props.footerLogoImage} alt={props.footerLogoAltText} />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+      <SubFooterBand
+        container="container"
+        brandLinks={brandLinks}
+        onClick={onClick}
+        target={target}
+        logo="/wmms-blk.svg"
+        error={error}
+        btnLink={btnLink}
+      />
+    </footer>
   );
-}
+};
+
+Footer.defaultProps = {
+  contactLink: "https://www.canada.ca/en/contact.html",
+  withMainBand: true,
+};
 
 Footer.propTypes = {
   /**
-   * array of objects containing the link text and link
+   * id of this component
    */
-  footerBoxLinks: PropTypes.arrayOf(
-    PropTypes.shape({
-      footerBoxlink: PropTypes.string.isRequired,
-      footerBoxLinkText: PropTypes.string.isRequired,
-    })
-  ),
+  id: PropTypes.string.isRequired,
+  /**
+   * Add the path Link to the top of your page for the "to the Top" button in mobile
+   */
+  btnLink: PropTypes.string.isRequired,
+
   /**
-   * array of objects containing the link text and link
+   * If true will display the error page version of the footer component
    */
-  links: PropTypes.arrayOf(
+  error: PropTypes.bool,
+
+  /**
+   * Allow user to pass in their own contact link
+   */
+  contactLink: PropTypes.string,
+
+  /**
+   * List of links to display on the footer
+   */
+  brandLinks: PropTypes.arrayOf(
     PropTypes.shape({
-      link: PropTypes.string.isRequired,
-      linkText: PropTypes.string.isRequired,
-    })
+      id: PropTypes.string,
+      text: PropTypes.string,
+      href: PropTypes.string,
+    }).isRequired
   ),
 
   /**
-   * alt text for footer canada-ca logo
+   * Specifies where to open the linked document
    */
-  footerLogoAltText: PropTypes.string.isRequired,
+  target: PropTypes.string,
 
   /**
-   * image path for footer logo
+   * Handle onclick on the footer media link
    */
-  footerLogoImage: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+
+  /**
+   * List of menu items to display in dropdown with links
+   */
+  contextualBandLinks: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+      text: PropTypes.string,
+      link: PropTypes.string,
+    })
+  ),
 };
diff --git a/components/organisms/Footer.stories.js b/components/organisms/Footer.stories.js
index 6e60079d2d..80f971b856 100644
--- a/components/organisms/Footer.stories.js
+++ b/components/organisms/Footer.stories.js
@@ -1,5 +1,5 @@
+import React from "react";
 import { Footer } from "./Footer";
-import logo from "../../public/wmms-blk.svg";
 
 export default {
   title: "Components/Organisms/Footer",
@@ -8,81 +8,9 @@ export default {
 
 const Template = (args) => <Footer {...args} />;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  links: [
-    {
-      link: "https://some-link-1.com",
-      linkText: "some-link-1",
-    },
-    {
-      link: "https://some-link-2.com",
-      linkText: "some-lin-2",
-    },
-    {
-      link: "https://some-link-3.com",
-      linkText: "some-link-3",
-    },
-    {
-      link: "https://some-link-4.com",
-      linkText: "some-link-4",
-    },
-    {
-      link: "https://some-link-5.com",
-      linkText: "some-link-5",
-    },
-    {
-      link: "https://some-link-6.com",
-      linkText: "some-link-6",
-    },
-    {
-      link: "https://some-link-7.com",
-      linkText: "some-link-7",
-    },
-    {
-      link: "https://some-link-8.com",
-      linkText: "some-link-8",
-    },
-  ],
-
-  footerBoxLinks: [
-    {
-      footerBoxlink: "https://some-link-11.com",
-      footerBoxLinkText: "some-link-11",
-    },
-    {
-      footerBoxlink: "https://some-link-22.com",
-      footerBoxLinkText: "some-lin-22",
-    },
-    {
-      footerBoxlink: "https://some-link-33.com",
-      footerBoxLinkText: "some-link-33",
-    },
-    {
-      footerBoxlink: "https://some-link-44.com",
-      footerBoxLinkText: "some-link-44",
-    },
-    {
-      footerBoxlink: "https://some-link-55.com",
-      footerBoxLinkText: "some-link-55",
-    },
-    {
-      footerBoxlink: "https://some-link-66.com",
-      footerBoxLinkText: "some-link-66",
-    },
-    {
-      footerBoxlink: "https://some-link-77.com",
-      footerBoxLinkText: "some-link-77",
-    },
-    {
-      footerBoxlink: "https://some-link-88.com",
-      footerBoxLinkText: "some-link-88",
-    },
-  ],
-
-  footerLogoAltText: "Symbol of the Government of Canada",
-  footerLogoImage: logo,
-  reportBtnText: "Report a problem",
-  reportDescription:
-    "Experiencing an issue with this product or have you spotted an error?",
+export const DefaultFooter = Template.bind({});
+DefaultFooter.args = {
+  id: "footer",
+  btnLink: "/",
+  target: "_blank",
 };
diff --git a/components/organisms/Footer.test.js b/components/organisms/Footer.test.js
index 94ce3a9f94..ef13b16afa 100644
--- a/components/organisms/Footer.test.js
+++ b/components/organisms/Footer.test.js
@@ -1,23 +1,28 @@
-/**
- * @jest-environment jsdom
- */
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-import { Primary } from "./Footer.stories";
+import { Footer } from "./Footer";
+import { DefaultFooter } from "./Footer.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
 
-it("renders Footer in its primary state", () => {
-  render(<Primary {...Primary.args} />);
+expect.extend(toHaveNoViolations);
 
-  expect(
-    screen.getByAltText("Symbol of the Government of Canada")
-  ).toBeTruthy();
-
-  Primary.args.footerBoxLinks.forEach((value) => {
-    screen.getByText(value.footerBoxLinkText);
+describe("Footer", () => {
+  test("renders Footer component with default props", async () => {
+    const { container } = render(<Footer {...DefaultFooter.args} />);
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+    expect(
+      screen.getByAltText("Symbol of the Government of Canada")
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 
-  Primary.args.links.forEach((value) => {
-    screen.getByText(value.linkText);
+  test("renders Footer component with custom brand links", async () => {
+    const { container } = render(<Footer {...DefaultFooter.args} />);
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+    expect(screen.getByText("Social media")).toBeInTheDocument();
+    expect(screen.getByText("Mobile applications")).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/components/design-system/HelpIcon.jsx b/components/organisms/HelpIcon.js
similarity index 98%
rename from components/design-system/HelpIcon.jsx
rename to components/organisms/HelpIcon.js
index e5f33a0db2..150f8ba9c7 100644
--- a/components/design-system/HelpIcon.jsx
+++ b/components/organisms/HelpIcon.js
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Modal } from "react-bootstrap";
-import { Button } from "./Button";
+import { DSButton } from "../atoms/DSButton";
 
 export const HelpIcon = ({ title, body, lang }) => {
   const [showModal, setShowModal] = useState(false);
@@ -61,7 +61,7 @@ export const HelpIcon = ({ title, body, lang }) => {
               />
             </Modal.Body>
             <Modal.Footer>
-              <Button
+              <DSButton
                 onClick={handleClose}
                 styling="primary"
                 text={lang === "en" ? "Close" : "Fermer"}
diff --git a/components/organisms/HelpIcon.stories.js b/components/organisms/HelpIcon.stories.js
new file mode 100644
index 0000000000..fa0ec3096c
--- /dev/null
+++ b/components/organisms/HelpIcon.stories.js
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { HelpIcon } from "./HelpIcon";
+
+export default {
+  title: "Components/Organisms/HelpIcon",
+  component: HelpIcon,
+};
+
+const Template = (args) => <HelpIcon {...args} />;
+
+export const Default = Template.bind({});
+export const SampleEN = Template.bind({});
+export const SampleFR = Template.bind({});
+
+Default.args = {
+  lang: "en",
+  title: "Descriptive title / Term requiring explanation",
+  body: "Description",
+};
+
+SampleEN.args = {
+  lang: "en",
+  title: "Separated",
+  body: "You are separated when you start living separate and apart from your spouse or common law partner because of a breakdown in the relationship for a period of at least 90 days.<br><br>Refer to marital status for more information",
+};
+
+SampleFR.args = {
+  lang: "fr",
+  title: "Séparé",
+  body: "Vous êtes considéré séparé lorsque vous vivez séparément de votre époux ou conjoint en raison de la rupture de votre union pour une période de 90 jours ou plus.<br><br>Voir état civil pour plus d’information",
+};
diff --git a/components/organisms/HelpIcon.test.js b/components/organisms/HelpIcon.test.js
new file mode 100644
index 0000000000..78d24248f0
--- /dev/null
+++ b/components/organisms/HelpIcon.test.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { axe, toHaveNoViolations } from "jest-axe";
+import { Default } from "./HelpIcon.stories";
+import { HelpIcon } from "./HelpIcon";
+
+expect.extend(toHaveNoViolations);
+
+// TODO
+// Add more tests for component behaviour
+
+describe("HelpIcon", () => {
+  it("renders HelpIcon without accessibility violations", async () => {
+    const { container } = render(<HelpIcon {...Default.args} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/components/organisms/Layout.js b/components/organisms/Layout.js
index c40c36a851..dbb594b8f5 100644
--- a/components/organisms/Layout.js
+++ b/components/organisms/Layout.js
@@ -1,14 +1,12 @@
 import PropTypes from "prop-types";
 import { Banner } from "../atoms/Banner";
-// import { Footer } from "@dts-stn/service-canada-design-system";
 import { PhaseBanner } from "./PhaseBanner";
 import { ReportAProblem } from "./ReportAProblem";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import { DateModified } from "../atoms/DateModified";
 import { Breadcrumb } from "../atoms/Breadcrumb";
-
-import { Footer } from "../design-system/Footer";
+import { Footer } from "../organisms/Footer";
 import Feedback from "./Feedback";
 
 /**
@@ -124,33 +122,7 @@ export const Layout = ({
         </div>
       </main>
 
-      <Footer
-        id="footer"
-        lang={locale}
-        btnLink={"#"}
-        brandLinks={[
-          {
-            id: "link1",
-            text: t("footerSocialMedia"),
-            href: t("footerSocialMediaURL"),
-          },
-          {
-            id: "link2",
-            text: t("footerMobileApp"),
-            href: t("footerMobileAppURL"),
-          },
-          {
-            id: "link3",
-            text: t("footerTermsAndCondition"),
-            href: t("footerTermsAndConditionURL"),
-          },
-          {
-            id: "link4",
-            text: t("footerPrivacy"),
-            href: t("footerPrivacyURL"),
-          },
-        ]}
-      />
+      <Footer id="footer" lang={locale} btnLink={"#"} />
     </div>
   );
 };
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000000..69d0995242
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+      "target": "ES6"
+  },
+  "exclude": [
+      "node_modules",
+      "**/node_modules/*"
+  ]
+}
\ No newline at end of file
diff --git a/pages/home.js b/pages/home.js
index e7e996a63d..704f7bf42f 100644
--- a/pages/home.js
+++ b/pages/home.js
@@ -4,8 +4,8 @@ import { Layout } from "../components/organisms/Layout";
 import { useEffect } from "react";
 import Card from "../components/molecules/Card";
 import aemServiceInstance from "../services/aemServiceInstance";
-import { Heading } from "../components/design-system/Heading";
-import { ContextualAlert } from "../components/design-system/ContextualAlert";
+import { Heading } from "../components/molecules/Heading";
+import { ContextualAlert } from "../components/molecules/ContextualAlert";
 
 export default function Home(props) {
   const pageData = props.pageData?.item;
diff --git a/pages/projects/benefits-navigator/[id].js b/pages/projects/benefits-navigator/[id].js
index 787d0175f7..4865d704db 100644
--- a/pages/projects/benefits-navigator/[id].js
+++ b/pages/projects/benefits-navigator/[id].js
@@ -6,7 +6,7 @@ import aemServiceInstance from "../../../services/aemServiceInstance";
 import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
 import FragmentRender from "../../../components/fragment_renderer/FragmentRender";
-import { Heading } from "../../../components/design-system/Heading";
+import { Heading } from "../../../components/molecules/Heading";
 
 export default function DynamicBenefitNavigatorPage(props) {
   const [pageData] = useState(props.pageData);
diff --git a/pages/projects/benefits-navigator/index.js b/pages/projects/benefits-navigator/index.js
index 5fed4ea491..cce21b05a7 100644
--- a/pages/projects/benefits-navigator/index.js
+++ b/pages/projects/benefits-navigator/index.js
@@ -6,8 +6,8 @@ import aemServiceInstance from "../../../services/aemServiceInstance";
 import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
 import Card from "../../../components/molecules/Card";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import { Heading } from "../../../components/design-system/Heading";
-import { Collapse } from "../../../components/design-system/Collapse";
+import { Heading } from "../../../components/molecules/Heading";
+import { Collapse } from "../../../components/molecules/Collapse";
 
 export default function BenefitsNavigatorOverview(props) {
   const [pageData] = useState(props.pageData.item);
diff --git a/pages/projects/dashboard/index.js b/pages/projects/dashboard/index.js
index e2d13b96ac..633ed37792 100644
--- a/pages/projects/dashboard/index.js
+++ b/pages/projects/dashboard/index.js
@@ -5,8 +5,8 @@ import { useEffect } from "react";
 import aemServiceInstance from "../../../services/aemServiceInstance";
 import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import { Heading } from "../../../components/design-system/Heading";
-import { Collapse } from "../../../components/design-system/Collapse";
+import { Heading } from "../../../components/molecules/Heading";
+import { Collapse } from "../../../components/molecules/Collapse";
 
 export default function MscaDashboard(props) {
   const pageData = props.pageData?.item;
diff --git a/pages/projects/digital-standards-playbook/index.js b/pages/projects/digital-standards-playbook/index.js
index f19e692e4d..307f631abf 100644
--- a/pages/projects/digital-standards-playbook/index.js
+++ b/pages/projects/digital-standards-playbook/index.js
@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import aemServiceInstance from "../../../services/aemServiceInstance";
 import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import { Heading } from "../../../components/design-system/Heading";
+import { Heading } from "../../../components/molecules/Heading";
 import { ActionButton } from "../../../components/atoms/ActionButton";
 
 export default function DigitalStandardsPlaybookPage(props) {
diff --git a/pages/projects/oas-benefits-estimator/[id].js b/pages/projects/oas-benefits-estimator/[id].js
index 114d679889..43bde3eb4f 100644
--- a/pages/projects/oas-benefits-estimator/[id].js
+++ b/pages/projects/oas-benefits-estimator/[id].js
@@ -7,7 +7,7 @@ import aemServiceInstance from "../../../services/aemServiceInstance";
 import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
 import FragmentRender from "../../../components/fragment_renderer/FragmentRender";
-import { Heading } from "../../../components/design-system/Heading";
+import { Heading } from "../../../components/molecules/Heading";
 
 export default function OASUpdatePage(props) {
   const { t } = useTranslation("common");
diff --git a/pages/projects/oas-benefits-estimator/index.js b/pages/projects/oas-benefits-estimator/index.js
index a5ff6a7367..2c44d3b500 100644
--- a/pages/projects/oas-benefits-estimator/index.js
+++ b/pages/projects/oas-benefits-estimator/index.js
@@ -7,8 +7,7 @@ import aemServiceInstance from "../../../services/aemServiceInstance";
 import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
 import Card from "../../../components/molecules/Card";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import { CTA } from "../../../components/design-system/CTA";
-import { Heading } from "../../../components/design-system/Heading";
+import { Heading } from "../../../components/molecules/Heading";
 
 export default function OasBenefitsEstimator(props) {
   const [pageData] = useState(props.pageData.item);
diff --git a/public/image1.png b/public/image1.png
new file mode 100644
index 0000000000..14c3e52257
Binary files /dev/null and b/public/image1.png differ
diff --git a/public/image2.png b/public/image2.png
new file mode 100644
index 0000000000..24f6de938c
Binary files /dev/null and b/public/image2.png differ
diff --git a/public/plus.svg b/public/plus.svg
new file mode 100644
index 0000000000..7d8292aad3
--- /dev/null
+++ b/public/plus.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 7.125H10.875V1.5C10.875 0.809766 10.3152 0.25 9.625 0.25H8.375C7.68477 0.25 7.125 0.809766 7.125 1.5V7.125H1.5C0.809766 7.125 0.25 7.68477 0.25 8.375V9.625C0.25 10.3152 0.809766 10.875 1.5 10.875H7.125V16.5C7.125 17.1902 7.68477 17.75 8.375 17.75H9.625C10.3152 17.75 10.875 17.1902 10.875 16.5V10.875H16.5C17.1902 10.875 17.75 10.3152 17.75 9.625V8.375C17.75 7.68477 17.1902 7.125 16.5 7.125Z" fill="white"/>
+</svg>