diff --git a/src/components/layouts/Footer.stories.jsx b/src/components/layouts/Footer.stories.jsx
new file mode 100644
index 0000000..b9229f4
--- /dev/null
+++ b/src/components/layouts/Footer.stories.jsx
@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Footer as FooterComponent } from "./Footer"
+
+
+export default {
+    component: FooterComponent,
+    title: "Layouts/Footer",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Footer = props => (
+    <FooterComponent {...props}>© 2021 Stefano Pigozzi</FooterComponent>
+)
+Footer.args = {}
diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
new file mode 100644
index 0000000..4e17b3a
--- /dev/null
+++ b/src/components/layouts/Footer.tsx
@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+export interface FooterProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Footer({...props}: FooterProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "page-footer")
+
+    return (
+        <BaseElement kind={"footer"} {...props}/>
+    )
+}