diff --git a/.gitignore b/.gitignore
index 43c8d7e..3a90445 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 /dist/
 /node_modules/
+/coverage
 
 *storybook.log
 
diff --git a/jest.config.js b/jest.config.js
index 9b4641d..a6b29cf 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,6 @@
 module.exports = {
     testEnvironment: "jsdom",
+    moduleNameMapper: {
+        '^.+.(svg)$': 'jest-transform-stub',
+    }
 };
\ No newline at end of file
diff --git a/package.json b/package.json
index 6f80b03..201da1d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "lint": "eslint .",
     "rollup": "rollup --config rollup.config.mjs",
     "jest": "jest --config jest.config.js",
+    "jest:coverage": "jest --coverage",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o storybook-static",
     "storybook:publish": "gh-pages -b storybook/publish -d storybook-static"
@@ -22,21 +23,17 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@mui/icons-material": "^6.1.7",
+    "jest-transform-stub": "^2.0.0",
     "react-icons": "^5.3.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@mui/material": "^6.1.7",
     "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0"
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@mui/material": "^6.1.7",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
@@ -78,8 +75,7 @@
     "storybook-dark-mode": "^4.0.2",
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.15.0",
-    "@testing-library/jest-dom": "^6.6.3"
+    "typescript-eslint": "^8.15.0"
   },
   "packageManager": "pnpm@9.12.3+sha256.24235772cc4ac82a62627cd47f834c72667a2ce87799a846ec4e8e555e2d4b8b"
 }
diff --git a/src/components/Footer.stories.tsx b/src/components/Footer.stories.tsx
new file mode 100644
index 0000000..5378e45
--- /dev/null
+++ b/src/components/Footer.stories.tsx
@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { Footer, FooterLink, FooterLinks } from "./Footer";
+
+const meta: Meta<typeof Footer> = {
+  title: "SciReactUI/Navigation/Footer",
+  component: Footer,
+  decorators: [(Story) => <Story />],
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LogoOnly: Story = {
+  args: {},
+};
+
+export const CopyrightOnly: Story = {
+  args: {
+    logo: "",
+    copyright: "Company",
+  },
+};
+
+export const CopyrightAndLogo: Story = {
+  args: { copyright: "Company" },
+};
+
+export const WithOneLink: Story = {
+  args: {
+    copyright: "Company",
+    children: [
+      <FooterLinks key="footer-links">
+        <FooterLink href="#" key="first-footer-link">
+          Link one
+        </FooterLink>
+      </FooterLinks>,
+    ],
+  },
+};
+
+export const WithTwoLinks: Story = {
+  args: {
+    copyright: "Company",
+    children: [
+      <FooterLinks key="footer-links">
+        <FooterLink href="#" key="first-footer-link">
+          Link one
+        </FooterLink>
+        <FooterLink href="#" key="second-footer-link">
+          Link two
+        </FooterLink>
+      </FooterLinks>,
+    ],
+  },
+};
diff --git a/src/components/Footer.test.tsx b/src/components/Footer.test.tsx
new file mode 100644
index 0000000..c58e882
--- /dev/null
+++ b/src/components/Footer.test.tsx
@@ -0,0 +1,88 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import dlsLogo from "../public/dls.svg";
+
+import { Footer, FooterLink, FooterLinks } from "./Footer";
+describe("Footer", () => {
+  test("Should render logo only", async () => {
+    render(<Footer logo={dlsLogo} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("img")).toBeInTheDocument();
+      // No copyright text
+      expect(screen.queryByRole("paragraph")).not.toBeTruthy();
+    });
+  });
+
+  test("Should render copyright only", async () => {
+    const copyrightText = "add text here";
+    render(<Footer logo={null} copyright={copyrightText} />);
+
+    await waitFor(() => {
+      expect(screen.queryByRole("paragraph")).toBeInTheDocument();
+      expect(screen.queryByRole("paragraph")?.textContent).toStrictEqual(
+        `Copyright © 2024 ${copyrightText}`
+      );
+      // No logo
+      expect(screen.queryByRole("img")).not.toBeTruthy();
+    });
+  });
+
+  test("Should render logo and copyright", async () => {
+    const copyrightText = "add text here";
+    render(<Footer logo={dlsLogo} copyright={copyrightText} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("img")).toBeInTheDocument();
+      expect(screen.queryByRole("paragraph")).toBeInTheDocument();
+      expect(screen.queryByRole("paragraph")?.textContent).toStrictEqual(
+        `Copyright © 2024 ${copyrightText}`
+      );
+    });
+  });
+
+  test("Should render with one link", async () => {
+    const lineOneText = "Link one";
+    const linkOneName = "link-one-href";
+
+    render(
+      <Footer>
+        <FooterLinks>
+          <FooterLink href={linkOneName}>{lineOneText}</FooterLink>
+        </FooterLinks>
+      </Footer>
+    );
+
+    await waitFor(() => {
+      const linkOneContainer = screen.getByText(lineOneText);
+
+      expect(linkOneContainer).toBeInTheDocument();
+      expect(linkOneContainer.getAttribute("href")).toStrictEqual(linkOneName);
+      expect(linkOneContainer.textContent).toStrictEqual(lineOneText);
+    });
+  });
+
+  test("Should render with two links", async () => {
+    const linkOneText = "Link one";
+    const linkTwoText = "Link two";
+    const linkOneName = "link-one-href";
+    const linkTwoName = "link-two-href";
+    render(
+      <Footer>
+        <FooterLinks>
+          <FooterLink href={linkOneName}>{linkOneText}</FooterLink>
+          <FooterLink href={linkTwoName}>{linkTwoText}</FooterLink>
+        </FooterLinks>
+      </Footer>
+    );
+
+    await waitFor(() => {
+      const linkTwoContainer = screen.getByText(linkTwoText);
+
+      expect(linkTwoContainer).toBeInTheDocument();
+      expect(linkTwoContainer.getAttribute("href")).toStrictEqual(linkTwoName);
+      expect(linkTwoContainer.textContent).toStrictEqual(linkTwoText);
+    });
+  });
+});
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..fc32945
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,115 @@
+import { Link, LinkProps, Typography, useTheme } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import dlsLogo from "../public/logo-short.svg";
+import React from "react";
+
+interface FooterLinksProps {
+  children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
+}
+
+interface FooterProps extends React.HTMLProps<HTMLDivElement> {
+  /** Location/content of the logo */
+  logo?: string | null;
+  copyright?: string | null;
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+const FooterLinks = ({ children }: FooterLinksProps) => {
+  return (
+    <div
+      style={{
+        float: "left",
+        alignItems: "center",
+        borderTop: "4px solid transparent",
+        borderBottom: "4px solid transparent",
+        display: "flex",
+        flexWrap: "wrap",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const FooterLink = ({ children, ...props }: LinkProps) => {
+  const theme = useTheme();
+
+  return (
+    <Link
+      sx={{
+        "&:hover": {
+          color: theme.palette.secondary.main,
+          borderBottom: "solid 4px",
+        },
+        textDecoration: "none",
+        color: theme.palette.primary.contrastText,
+        marginLeft: "1.5rem",
+        cursor: "pointer",
+      }}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
+
+/*
+ * Basic footer bar.
+ * Can be used with `FooterLinks` and `FooterLink` to display a list of links.
+ */
+const Footer = ({
+  logo = dlsLogo as string,
+  copyright,
+  children,
+  ...props
+}: FooterProps) => {
+  const theme = useTheme();
+
+  return (
+    <footer
+      style={{
+        bottom: 0,
+        marginTop: "auto",
+        minHeight: 50,
+        backgroundColor: theme.palette.primary.light,
+      }}
+      {...props}
+    >
+      <Grid container>
+        <Grid
+          size={{ xs: 6, md: 8 }}
+          style={{
+            alignContent: "center",
+          }}
+        >
+          {children}
+        </Grid>
+        <Grid size={{ xs: 6, md: 4 }}>
+          <div
+            style={{
+              float: "right",
+              paddingTop: "10px",
+              paddingRight: "15px",
+              textAlign: "right",
+            }}
+          >
+            {logo ? <img alt="footer-logo" src={logo} /> : null}
+            {copyright ? (
+              <Typography
+                style={{
+                  margin: 0,
+                  color: theme.palette.primary.contrastText,
+                }}
+              >
+                {`Copyright © ${new Date().getFullYear()} ${copyright}`}
+              </Typography>
+            ) : null}
+          </div>
+        </Grid>
+      </Grid>
+    </footer>
+  );
+};
+
+export { Footer, FooterLinks, FooterLink };
+export type { FooterLinksProps, FooterProps };
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index cad3b14..297377c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -11,7 +11,7 @@ import {
   useTheme,
 } from "@mui/material";
 import { MdMenu, MdClose } from "react-icons/md";
-import logoImage from "../public/logo-dark.svg"
+import logoImage from "../public/logo-dark.svg";
 import React, { useState } from "react";
 
 interface NavLinksProps {
@@ -83,12 +83,12 @@ const NavLinks = ({ children }: NavLinksProps) => {
         {children}
       </Stack>
       <Drawer
-          open={isOpen}
-          onClose={onClose}
-          anchor="left"
-          PaperProps={{
-            sx:{backgroundColor:theme.palette.primary.main}
-          }}
+        open={isOpen}
+        onClose={onClose}
+        anchor="left"
+        PaperProps={{
+          sx: { backgroundColor: theme.palette.primary.main },
+        }}
       >
         <Box
           sx={{
@@ -116,13 +116,13 @@ const Navbar = ({
   ...props
 }: NavbarProps) => {
   const theme = useTheme();
-  
+
   return (
-    <Box position="sticky" top="0" zIndex={1} width="100%" {...props}>
+    <Box top="0" zIndex={1} width="100%" {...props}>
       <Paper
         sx={{
           display: "flex",
-          backgroundColor:theme.palette.primary.main,
+          backgroundColor: theme.palette.primary.main,
           px: { xs: "1rem", md: "7.5vw" },
           height: 50,
           width: "100%",
@@ -138,11 +138,13 @@ const Navbar = ({
         >
           {logo ? (
             <Link href="/" key="logo">
-              <Box maxWidth="5rem"
+              <Box
+                maxWidth="5rem"
                 sx={{
-                "&:hover": {  filter: "brightness(80%);" }
-              }}>
-              <img
+                  "&:hover": { filter: "brightness(80%);" },
+                }}
+              >
+                <img
                   alt="Home"
                   src={logo}
                   width={"100px"}
@@ -159,4 +161,4 @@ const Navbar = ({
 };
 
 export { Navbar, NavLinks, NavLink };
-export type {NavLinksProps, NavbarProps };
\ No newline at end of file
+export type { NavLinksProps, NavbarProps };
diff --git a/src/index.ts b/src/index.ts
index 5b4027f..540288e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,7 @@
 // components
 export * from "./components/Breadcrumbs";
 export * from "./components/Navbar";
+export * from "./components/Footer";
 export * from "./components/User";
 export * from "./components/VisitInput";
 
diff --git a/src/public/logo-short.svg b/src/public/logo-short.svg
new file mode 100644
index 0000000..0af1a17
--- /dev/null
+++ b/src/public/logo-short.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="49.172" height="49.172" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(1.25 0 0 -1.25 -168.46 856.03)">
+        <path id="path2851" d="m154.43 649.48c8.6534 0 15.669 7.015 15.669 15.669s-7.0156 15.669-15.669 15.669c-8.6534 0-15.669-7.015-15.669-15.669s7.0153-15.669 15.669-15.669" fill="#fff" />
+        <path id="path2853" d="m160.44 656.04c-0.83309-0.11908-1.1016-0.76755-0.5967-1.4405l2.3067-3.0758c2.3039 1.3071 4.2447 3.1788 5.6312 5.4302l-7.3412-0.91392" fill="#fddd04" />
+        <path id="path2855" d="m148.46 659.31c0.83309 0.11909 1.1016 0.7673 0.5967 1.4405l-6.0343 8.0458c-0.50516 0.6732-0.3672 0.81115 0.306 0.30625l8.0445-6.0336c0.6732-0.50516 1.3214-0.23639 1.4405 0.59644l1.4224 14.668c0.11884 0.83309 0.31365 0.83309 0.43274 0l1.4224-14.67c0.11909-0.83308 0.76704-1.1013 1.4405-0.59644l8.0475 6.0356c0.6732 0.5049 0.8109 0.36695 0.306-0.30625l-6.0348-8.046c-0.5049-0.67345-0.23639-1.3214 0.5967-1.4405l8.0873-1.007c1.0067 2.0691 1.5728 4.3919 1.5728 6.8473 0 8.6529-7.0148 15.668-15.668 15.668s-15.668-7.0148-15.668-15.668c0-2.4569 0.56636-4.7807 1.5741-6.8501l8.1146 1.01" fill="#fddd04" />
+        <path id="path2857" d="m152.81 651.68c-0.11908 0.83309-0.76729 1.1016-1.4405 0.5967l-2.4082-1.8064c1.3104-0.48883 2.7043-0.80452 4.154-0.9259l-0.30524 2.1356" fill="#fddd04" />
+        <path id="path2859" d="m156.09 651.68-0.30524-2.1354c1.4474 0.12317 2.8387 0.4409 4.1468 0.93101l-2.4011 1.8011c-0.67345 0.5049-1.3214 0.23639-1.4405-0.5967" fill="#fddd04" />
+        <path id="path2861" d="m148.46 656.04-7.3723 0.918c1.3908-2.2598 3.3397-4.1371 5.6539-5.4455l2.3151 3.0873c0.5049 0.67295 0.23639 1.3212-0.5967 1.4402" fill="#fddd04" />
+    </g>
+</svg>
\ No newline at end of file