diff --git a/packages/web-react/src/components/Footer/__tests__/Footer.test.tsx b/packages/web-react/src/components/Footer/__tests__/Footer.test.tsx
index 2647384176..bd391fc54d 100644
--- a/packages/web-react/src/components/Footer/__tests__/Footer.test.tsx
+++ b/packages/web-react/src/components/Footer/__tests__/Footer.test.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import { BackgroundColors } from '../../../constants';
 import Footer from '../Footer';
 
 describe('Footer', () => {
@@ -15,4 +16,20 @@ describe('Footer', () => {
 
     expect(screen.getByRole('contentinfo')).toHaveTextContent('Hello World');
   });
+
+  it.each([Object.values(BackgroundColors)])('should have background %s color', (color) => {
+    render(<Footer backgroundColor={color}>Hello World</Footer>);
+
+    expect(screen.getByRole('contentinfo')).toHaveClass(`bg-${color}`);
+  });
+
+  it('should have correct correct utility class paddings', () => {
+    render(
+      <Footer paddingTop="space-1000" paddingBottom="space-1100">
+        Hello World
+      </Footer>,
+    );
+
+    expect(screen.getByRole('contentinfo')).toHaveClass('pt-1000 pb-1100');
+  });
 });
diff --git a/packages/web-react/src/components/Footer/stories/Footer.stories.tsx b/packages/web-react/src/components/Footer/stories/Footer.stories.tsx
index f0178f06f9..850b733bc4 100644
--- a/packages/web-react/src/components/Footer/stories/Footer.stories.tsx
+++ b/packages/web-react/src/components/Footer/stories/Footer.stories.tsx
@@ -1,9 +1,10 @@
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { BackgroundColors } from '../../../constants';
 import { Container } from '../../Container';
+import Footer from '../Footer';
 import ReadMe from '../README.md';
-import { Footer } from '..';
 
 const meta: Meta<typeof Footer> = {
   title: 'Components/Footer',
@@ -17,9 +18,31 @@ const meta: Meta<typeof Footer> = {
     children: {
       control: 'object',
     },
+    backgroundColor: {
+      control: 'select',
+      options: [...Object.values(BackgroundColors)],
+      table: {
+        defaultValue: { summary: BackgroundColors.SECONDARY },
+      },
+    },
+    paddingBottom: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'space-1200' },
+      },
+    },
+    paddingTop: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'space-1400' },
+      },
+    },
   },
   args: {
     children: <Container>Footer content</Container>,
+    backgroundColor: BackgroundColors.SECONDARY,
+    paddingBottom: 'space-1400',
+    paddingTop: 'space-1200',
   },
 };
 
@@ -28,5 +51,5 @@ type Story = StoryObj<typeof Footer>;
 
 export const Playground: Story = {
   name: 'Footer',
-  render: (args) => <Footer UNSAFE_className="bg-secondary pt-1400 pb-1200" {...args} />,
+  render: (args) => <Footer {...args} />,
 };