diff --git a/.changeset/great-peaches-drop.md b/.changeset/great-peaches-drop.md
new file mode 100644
index 0000000000..e0d6291f1d
--- /dev/null
+++ b/.changeset/great-peaches-drop.md
@@ -0,0 +1,12 @@
+---
+"@cloudoperators/juno-ui-components": major
+---
+
+Feature: Enhanced `PageFooter` Component for Flexible Theming and Accessibility
+
+- Removed hardcoded cloud illustration, allowing CSS-based branding customization.
+- Added a `copyright` prop for optional right-side rendering.
+- Updated `children` rendering to support single/multiple items with defined spacing.
+- Integrated ARIA roles and attributes (role="group", aria-labelledby) for better semantic clarity.
+- Implemented design tokens, accommodating `light` and `dark` modes.
+- Added `PageFooter` to Example App.
diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
index 05123a606a..e2a08f1e53 100644
--- a/apps/example/src/App.tsx
+++ b/apps/example/src/App.tsx
@@ -6,11 +6,10 @@
 import React, { useEffect, useMemo } from "react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
-import { AppShell, AppShellProvider } from "@cloudoperators/juno-ui-components"
+import { AppShell, AppShellProvider, PageFooter } from "@cloudoperators/juno-ui-components"
 
 import useAuthStore from "./store/useAuthStore"
 import AsyncWorker from "./components/AsyncWorker"
-import Footer from "./components/app-shell/Footer"
 import useConfigStore from "./store/useConfigStore"
 import Content from "./components/app-shell/Content"
 import Header from "./components/app-shell/header/Header"
@@ -32,13 +31,15 @@ const App: React.FC<AppProps> = ({ endpoint = "", id = "" }) => {
     setEndpoint(endpoint)
   }, [endpoint])
 
+  const COPYRIGHT_TEXT = "Copyright © 2024 SAP SE, SAP affiliates and Juno contributors"
+
   return (
     <QueryClientProvider client={queryClient}>
       <AsyncWorker consumerId={id} />
       <AppShell
         pageHeader={<Header />}
         sideNavigation={isUserAuthenticated ? <SideNavigationComponent /> : null}
-        pageFooter={<Footer />}
+        pageFooter={<PageFooter copyright={COPYRIGHT_TEXT} />}
       >
         <Content />
       </AppShell>
diff --git a/apps/example/src/components/app-shell/Footer.tsx b/apps/example/src/components/app-shell/Footer.tsx
deleted file mode 100644
index 995d5da18f..0000000000
--- a/apps/example/src/components/app-shell/Footer.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from "react"
-import { PageFooter, Stack } from "@cloudoperators/juno-ui-components"
-
-const COPYRIGHT_TEXT = "Copyright © 2024 SAP SE, SAP affiliates and Juno contributors"
-const LISENCE_TEXT = "Lisence Apache 2.0"
-
-const Footer: React.FC = () => {
-  return (
-    <PageFooter>
-      <Stack gap="20">
-        <div>{COPYRIGHT_TEXT}</div>
-        <div>{LISENCE_TEXT}</div>
-      </Stack>
-    </PageFooter>
-  )
-}
-
-export default Footer
diff --git a/packages/ui-components/src/components/PageFooter/PageFooter.component.tsx b/packages/ui-components/src/components/PageFooter/PageFooter.component.tsx
index 581a1fabb7..d79a4f4ded 100644
--- a/packages/ui-components/src/components/PageFooter/PageFooter.component.tsx
+++ b/packages/ui-components/src/components/PageFooter/PageFooter.component.tsx
@@ -4,43 +4,48 @@
  */
 
 import React from "react"
-import CCloudShape from "../../img/ccloud_shape.svg"
+import "./page-footer.css"
 
-const basePageFooter = `
-  jn:flex
+const basePageFooterStyles = `
   jn:shrink-0
   jn:grow-0
   jn:basis-auto
   jn:relative
-  jn:bg-theme-global-bg
   jn:min-h-[3.25rem]
-  jn:pl-6
-  jn:pr-24
-  jn:py-5
   jn:z-50
+  jn:text-theme-pagefooter
+  jn:bg-theme-pagefooter
 `
 
-const logoStyles = `
-  jn:h-[2.625rem]
-  jn:absolute
-  jn:right-0
-  jn:bottom-0
-`
+export interface PageFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional custom styling class name for the footer container */
+  className?: string
+  /** The content to render inside the footer, typically links or informational text
+   * Use a list structure e.g. `<ul>` with `<li>` for grouped content or links, as in examples.
+   * Available CSS classes for styling:
+   * - `.juno-pagefooter-title`: Style for a title element within a column.
+   * - `.juno-pagefooter-items`: Style for a list of items.
+   * - `.juno-pagefooter-items-inline`: Style for a single line list with pipe separators.
+   * - `.juno-pagefooter-item`: Style for individual list items.
+   */
+  children?: React.ReactNode
+  /** Optional copyright notice to display within the footer */
+  copyright?: string
+}
 
 /**
- * The page footer component renders a footer at the bottom of the website. Place as last child of AppBody.
+ * PageFooter component renders a footer at the bottom of the page.
+ * It consists of a flexible content area for children and an optional copyright section.
+ * Usage:
+ * The component can be used to add legal disclaimers, links, or other contextual information at the page's footer.
  */
-export const PageFooter: React.FC<PageFooterProps> = ({ className = "", children, ...props }) => {
+export const PageFooter: React.FC<PageFooterProps> = ({ className = "", children, copyright = "", ...props }) => {
   return (
-    <div className={`juno-pagefooter ${basePageFooter} ${className}`} role="contentinfo" {...props}>
-      {children}
-      <CCloudShape className={logoStyles} alt="cloud shape" />
+    <div className={`juno-pagefooter ${basePageFooterStyles} ${className}`} role="contentinfo" {...props}>
+      <div className="juno-content">
+        <div className={"juno-pagefooter-children"}>{children}</div>
+        {copyright && <div className="juno-pagefooter-copyright">{copyright}</div>}
+      </div>
     </div>
   )
 }
-
-export interface PageFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Add custom class name */
-  className?: string
-  children?: React.ReactNode
-}
diff --git a/packages/ui-components/src/components/PageFooter/PageFooter.stories.tsx b/packages/ui-components/src/components/PageFooter/PageFooter.stories.tsx
index 74e18825d2..850dbc366e 100644
--- a/packages/ui-components/src/components/PageFooter/PageFooter.stories.tsx
+++ b/packages/ui-components/src/components/PageFooter/PageFooter.stories.tsx
@@ -4,7 +4,6 @@
  */
 
 import React from "react"
-
 import { PageFooter, PageFooterProps } from "./index"
 
 export default {
@@ -17,22 +16,167 @@ export default {
         type: { summary: "ReactNode" },
       },
     },
+    copyright: {
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    className: {
+      control: false,
+    },
   },
 }
 
 const Template = (args: PageFooterProps) => <PageFooter {...args}></PageFooter>
 
-export const Simple = {
+export const WithCustomCopyright = {
   render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: "PageFooter with a custom copyright notice.",
+      },
+    },
+  },
+  args: {
+    copyright: "© 2023 Custom Corporation. All rights reserved.",
+  },
+}
 
+export const InlineLinks = {
+  render: Template,
   parameters: {
     docs: {
       description: {
-        story:
-          "The page footer component renders a footer at the bottom of the website. Place as last child of AppBody.",
+        story: "PageFooter rendering inline links, illustrating how children can be displayed within the footer.",
       },
     },
   },
+  args: {
+    children: (
+      <ul className="juno-pagefooter-items-inline">
+        <li>
+          <a className="juno-pagefooter-item" href="#">
+            About
+          </a>
+        </li>
+        <li>
+          <a className="juno-pagefooter-item" href="#">
+            Imprint
+          </a>
+        </li>
+        <li>
+          <a className="juno-pagefooter-item" href="#">
+            Terms of Use
+          </a>
+        </li>
+      </ul>
+    ),
+  },
+}
 
-  args: {},
+export const WithTwoColumns = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: "An example showing two columns within the PageFooter, each with a title and list of items.",
+      },
+    },
+  },
+  args: {
+    children: (
+      <>
+        <div role="group" aria-labelledby="footer-col1-title">
+          <p className="juno-pagefooter-title" id="footer-col1-title">
+            Column 1
+          </p>
+          <ul className="juno-pagefooter-items">
+            <li>
+              <a className="juno-pagefooter-item" href="#">
+                About
+              </a>
+            </li>
+            <li>
+              <a className="juno-pagefooter-item" href="#">
+                Imprint
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div role="group" aria-labelledby="footer-col2-title">
+          <p className="juno-pagefooter-title" id="footer-col2-title">
+            Column 2
+          </p>
+          <ul className="juno-pagefooter-items">
+            <li>
+              <a className="juno-pagefooter-item" href="#">
+                Privacy Policy
+              </a>
+            </li>
+            <li>
+              <a className="juno-pagefooter-item" href="#">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </div>
+      </>
+    ),
+  },
+}
+
+export const WithThreeColumns = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: "An example showing three columns within the PageFooter, each with a title and list of items.",
+      },
+    },
+  },
+  args: {
+    copyright: "© 2023 Custom Corporation. All rights reserved.",
+    children: (
+      <>
+        <div role="group" aria-labelledby="footer-col1-title">
+          <p className="juno-pagefooter-title" id="footer-col1-title">
+            Column 1
+          </p>
+          <ul className="juno-pagefooter-items">
+            <li>
+              <a className="juno-pagefooter-item" href="#">
+                About
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div role="group" aria-labelledby="footer-col2-title">
+          <p className="juno-pagefooter-title" id="footer-col2-title">
+            Column 2
+          </p>
+          <ul className="juno-pagefooter-items">
+            <li>
+              <a className="juno-pagefooter-item" href="#">
+                Privacy Policy
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div role="group" aria-labelledby="footer-col3-title">
+          <p className="juno-pagefooter-title" id="footer-col3-title">
+            Column 3
+          </p>
+          <ul className="juno-pagefooter-items">
+            <li>
+              <a className="juno-pagefooter-item" href="#">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </div>
+      </>
+    ),
+  },
 }
diff --git a/packages/ui-components/src/components/PageFooter/PageFooter.test.tsx b/packages/ui-components/src/components/PageFooter/PageFooter.test.tsx
index 066e7ea4a4..59babc5902 100644
--- a/packages/ui-components/src/components/PageFooter/PageFooter.test.tsx
+++ b/packages/ui-components/src/components/PageFooter/PageFooter.test.tsx
@@ -10,35 +10,59 @@ import { PageFooter } from "./index"
 describe("PageFooter", () => {
   test("renders a simple Page Footer and has flexbox layout", () => {
     render(<PageFooter />)
-    expect(screen.getByRole("contentinfo")).toBeInTheDocument()
-    expect(screen.getByRole("contentinfo")).toHaveClass("jn:flex")
+    const footer = screen.getByRole("contentinfo")
+    expect(footer).toBeInTheDocument()
   })
 
-  test("renders a Page Footer to have the global bg color", () => {
+  test("renders a Page Footer with specific styling", () => {
     render(<PageFooter />)
-    expect(screen.getByRole("contentinfo")).toBeInTheDocument()
-    expect(screen.getByRole("contentinfo")).toHaveClass("jn:bg-theme-global-bg")
+    const footer = screen.getByRole("contentinfo")
+    expect(footer).toBeInTheDocument()
+    expect(footer).toHaveClass("juno-pagefooter") // Confirm it has the main class
   })
 
   test("renders children as passed", () => {
     render(
       <PageFooter>
-        <button></button>
+        <button>Test Button</button>
       </PageFooter>
     )
-    expect(screen.getByRole("contentinfo")).toBeInTheDocument()
-    expect(screen.getByRole("button")).toBeInTheDocument()
+    const button = screen.getByRole("button")
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveTextContent("Test Button")
   })
 
   test("renders a custom className", () => {
     render(<PageFooter className="my-custom-classname" />)
-    expect(screen.getByRole("contentinfo")).toBeInTheDocument()
-    expect(screen.getByRole("contentinfo")).toHaveClass("my-custom-classname")
+    const footer = screen.getByRole("contentinfo")
+    expect(footer).toBeInTheDocument()
+    expect(footer).toHaveClass("my-custom-classname")
   })
 
   test("renders all props", () => {
     render(<PageFooter data-lolol="some-prop" />)
-    expect(screen.getByRole("contentinfo")).toBeInTheDocument()
-    expect(screen.getByRole("contentinfo")).toHaveAttribute("data-lolol", "some-prop")
+    const footer = screen.getByRole("contentinfo")
+    expect(footer).toBeInTheDocument()
+    expect(footer).toHaveAttribute("data-lolol", "some-prop")
+  })
+
+  test("renders copyright section when provided", () => {
+    render(<PageFooter copyright="© 2023 Test" />)
+    const footer = screen.getByRole("contentinfo")
+    const copyrightSection = footer.querySelector(".juno-pagefooter-copyright")
+    expect(copyrightSection).toBeInTheDocument()
+    expect(copyrightSection).toHaveTextContent("© 2023 Test")
+  })
+
+  test("renders children section with flex layout", () => {
+    render(
+      <PageFooter>
+        <span>Child Item</span>
+      </PageFooter>
+    )
+    const childrenSection = screen.getByRole("contentinfo").querySelector(".juno-pagefooter-children")
+    expect(childrenSection).toBeInTheDocument()
+    expect(childrenSection).toHaveClass("juno-pagefooter-children")
+    expect(childrenSection).toHaveTextContent("Child Item")
   })
 })
diff --git a/packages/ui-components/src/components/PageFooter/page-footer.css b/packages/ui-components/src/components/PageFooter/page-footer.css
new file mode 100644
index 0000000000..d85021ebb3
--- /dev/null
+++ b/packages/ui-components/src/components/PageFooter/page-footer.css
@@ -0,0 +1,82 @@
+.juno-pagefooter {
+  font-size: 0.875rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.juno-pagefooter-title {
+  font-weight: bold;
+  color: var(--color-pagefooter-title, var(--text-color-theme-pagefooter));
+}
+
+.juno-pagefooter-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.juno-pagefooter-items-inline {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.juno-pagefooter-items-inline > li {
+  position: relative;
+}
+
+.juno-pagefooter-items-inline > li:not(:last-child)::after {
+  content: "|";
+  margin-left: 0.38rem;
+  margin-right: 0.38rem;
+}
+
+.juno-pagefooter-items-inline > li:last-child::after {
+  content: "";
+  margin-right: 0;
+}
+
+.juno-pagefooter-item {
+  color: var(--color-pagefooter-item-default);
+  flex: 1;
+  min-width: 12.5rem;
+  max-width: 21.875rem;
+  line-height: 1.25rem;
+  margin-bottom: 0.13rem;
+}
+
+.juno-pagefooter-item:hover {
+  color: var(--color-pagefooter-item-hover);
+  text-decoration: underline;
+}
+
+.juno-pagefooter-item:active {
+  color: var(--color-pagefooter-item-active);
+  text-decoration: none;
+}
+
+.juno-content {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-top: 1px solid var(--color-pagefooter-border);
+  display: flex;
+  gap: 6.75rem;
+}
+
+.juno-pagefooter-children {
+  display: flex;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.juno-pagefooter-children > * {
+  flex-grow: 1; /* Allows each child to grow and fill the container equally */
+  max-width: 22rem;
+}
+
+.juno-pagefooter-copyright {
+  margin-left: auto;
+  text-align: right;
+  color: var(--footer-text-color);
+}
diff --git a/packages/ui-components/src/global.css b/packages/ui-components/src/global.css
index a23bdd9675..810b42213f 100644
--- a/packages/ui-components/src/global.css
+++ b/packages/ui-components/src/global.css
@@ -14,6 +14,7 @@
 @import "./components/ThemeToggle/themeToggle.css" layer(utilities);
 @import "./components/DataGridRow/data-grid-row.css" layer(utilities);
 @import "./components/SideNavigationItem/sidenavigationitem.css" layer(utilities);
+@import "./components/PageFooter/page-footer.css" layer(utilities);
 
 :root,
 :host {
@@ -337,6 +338,11 @@
   --color-theme-button-subdued: var(--color-button-subdued-text);
   --color-theme-button-sundued-hover: var(--color-button-subdued-hover-text);
   --color-theme-button-sundued-active: var(--color-button-subdued-active-text);
+
+  /* PageFooter */
+  --text-color-theme-pagefooter: var(--color-pagefooter-text);
+  --background-color-theme-pagefooter: var(--color-pagefooter-background);
+
   /* TODO Border Color */
   --border-theme-button-subdued: 1px solid var(--color-button-subdued-border);
   --border-theme-button-subdued-hover: var(--color-button-subdued-hover-border);
@@ -722,6 +728,15 @@
   /* LT Box Shadow */
   --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
   --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.3)), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
+  /* LT PageFooter */
+  --color-pagefooter-text: var(--color-text-light);
+  --color-pagefooter-background: var(--color-white);
+  --color-pagefooter-border: var(--color-border-default);
+  --color-pagefooter-title: var(--color-text-default);
+  --color-pagefooter-item-default: var(--color-text-light);
+  --color-pagefooter-item-hover: var(--color-text-light);
+  --color-pagefooter-item-active: var(--color-accent);
+  --color-border-default: var(--color-juno-grey-light-7);
 }
 
 /* JUNO THEME: DARK MODE */
@@ -960,6 +975,15 @@
   /* DT Box Shadow */
   --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
   --box-shadow-hover: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
+  /* DT PageFooter */
+  --color-pagefooter-text: var(--color-text-light);
+  --color-pagefooter-background: var(--color-juno-grey-blue-10);
+  --color-pagefooter-border: var(--color-border-default);
+  --color-pagefooter-title: var(--color-text-default);
+  --color-pagefooter-item-default: var(--color-text-light);
+  --color-pagefooter-item-hover: var(--color-text-light);
+  --color-pagefooter-item-active: var(--color-accent);
+  --color-border-default: var(--color-juno-grey-blue-3);
 }
 
 /*
diff --git a/packages/ui-components/src/theme.css b/packages/ui-components/src/theme.css
index d9049faf95..43add2adff 100644
--- a/packages/ui-components/src/theme.css
+++ b/packages/ui-components/src/theme.css
@@ -329,6 +329,10 @@
   --color-theme-button-sundued-hover: var(--color-button-subdued-hover-text);
   --color-theme-button-sundued-active: var(--color-button-subdued-active-text);
 
+  /* PageFooter */
+  --text-color-theme-pagefooter: var(--color-pagefooter-text);
+  --background-color-theme-pagefooter: var(--color-pagefooter-background);
+
   /* TODO Border Color */
   --border-theme-button-subdued: 1px solid var(--color-button-subdued-border);
   --border-theme-button-subdued-hover: var(--color-button-subdued-hover-border);
@@ -715,6 +719,15 @@
   /* LT Box Shadow */
   --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
   --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.3)), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
+  /* LT PageFooter */
+  --color-pagefooter-text: var(--color-text-light);
+  --color-pagefooter-background: var(--color-white);
+  --color-pagefooter-border: var(--color-border-default);
+  --color-pagefooter-title: var(--color-text-default);
+  --color-pagefooter-item-default: var(--color-text-light);
+  --color-pagefooter-item-hover: var(--color-text-light);
+  --color-pagefooter-item-active: var(--color-accent);
+  --color-border-default: var(--color-juno-grey-light-7);
 }
 
 /* JUNO THEME: DARK MODE */
@@ -953,6 +966,15 @@
   /* DT Box Shadow */
   --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
   --box-shadow-hover: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
+  /* DT PageFooter */
+  --color-pagefooter-text: var(--color-text-light);
+  --color-pagefooter-background: var(--color-juno-grey-blue-10);
+  --color-pagefooter-border: var(--color-border-default);
+  --color-pagefooter-title: var(--color-text-default);
+  --color-pagefooter-item-default: var(--color-text-light);
+  --color-pagefooter-item-hover: var(--color-text-light);
+  --color-pagefooter-item-active: var(--color-accent);
+  --color-border-default: var(--color-juno-grey-blue-3);
 }
 
 /*