diff --git a/packages/project-tailwind/src/components/Alert.tsx b/packages/project-tailwind/src/components/Alert.tsx
index d5cdc536c..ecd3c871e 100644
--- a/packages/project-tailwind/src/components/Alert.tsx
+++ b/packages/project-tailwind/src/components/Alert.tsx
@@ -37,9 +37,7 @@ export interface IAlertProps {
 const DISMISS_TEXT = 'Dismiss';
 
 /**
- * Alert component
- *
- * @description Used to display application messages and alerts
+ * Display application messages and alerts
  *
  * @param props - Component props
  *
diff --git a/packages/project-tailwind/src/components/Logo.tsx b/packages/project-tailwind/src/components/Logo.tsx
new file mode 100644
index 000000000..4af1109b2
--- /dev/null
+++ b/packages/project-tailwind/src/components/Logo.tsx
@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+/** Logo component properties */
+export interface ILogoProps extends ComponentPropsWithoutRef<'svg'> {
+  /** Alternative information text */
+  alt: string;
+}
+
+/**
+ * Motech Development logo
+ *
+ * @param props - Component props
+ *
+ * @returns Logo component
+ */
+export function Logo(props: ILogoProps) {
+  const { alt, ...rest } = props;
+
+  return (
+    <svg
+      {...rest}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 345.21 398.61"
+      aria-labelledby="logo-alt-text"
+    >
+      <title id="logo-alt-text">{alt}</title>
+      <polygon
+        className="fill-current"
+        points="172.6 199.31 57.53 132.87 57.53 332.18 0 298.96 0 99.65 172.6 0 345.21 99.65 345.21 298.96 287.67 332.18 287.67 132.87 172.6 199.31"
+      />
+      <polygon
+        className="fill-current"
+        points="115.07 365.39 115.07 232.53 172.6 265.74 230.14 232.53 230.14 365.39 172.6 398.61 115.07 365.39"
+      />
+    </svg>
+  );
+}
diff --git a/packages/project-tailwind/src/components/__tests__/Logo.test.tsx b/packages/project-tailwind/src/components/__tests__/Logo.test.tsx
new file mode 100644
index 000000000..e89edf01a
--- /dev/null
+++ b/packages/project-tailwind/src/components/__tests__/Logo.test.tsx
@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import { Logo } from '../Logo';
+
+describe('Logo', () => {
+  it('should render the logo', () => {
+    const { asFragment } = render(<Logo alt="Motech Development" />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should apply native svg attributes', () => {
+    const { asFragment } = render(
+      <Logo className="h-40 w-40 text-blue-600" alt="Motech Development" />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/packages/project-tailwind/src/components/__tests__/__snapshots__/Logo.test.tsx.snap b/packages/project-tailwind/src/components/__tests__/__snapshots__/Logo.test.tsx.snap
new file mode 100644
index 000000000..838edad78
--- /dev/null
+++ b/packages/project-tailwind/src/components/__tests__/__snapshots__/Logo.test.tsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Logo should apply native svg attributes 1`] = `
+<DocumentFragment>
+  <svg
+    aria-labelledby="logo-alt-text"
+    class="w-40 h-40 text-blue-600"
+    viewBox="0 0 345.21 398.61"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title
+      id="logo-alt-text"
+    >
+      Motech Development
+    </title>
+    <polygon
+      class="fill-current"
+      points="172.6 199.31 57.53 132.87 57.53 332.18 0 298.96 0 99.65 172.6 0 345.21 99.65 345.21 298.96 287.67 332.18 287.67 132.87 172.6 199.31"
+    />
+    <polygon
+      class="fill-current"
+      points="115.07 365.39 115.07 232.53 172.6 265.74 230.14 232.53 230.14 365.39 172.6 398.61 115.07 365.39"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`Logo should render the logo 1`] = `
+<DocumentFragment>
+  <svg
+    aria-labelledby="logo-alt-text"
+    viewBox="0 0 345.21 398.61"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title
+      id="logo-alt-text"
+    >
+      Motech Development
+    </title>
+    <polygon
+      class="fill-current"
+      points="172.6 199.31 57.53 132.87 57.53 332.18 0 298.96 0 99.65 172.6 0 345.21 99.65 345.21 298.96 287.67 332.18 287.67 132.87 172.6 199.31"
+    />
+    <polygon
+      class="fill-current"
+      points="115.07 365.39 115.07 232.53 172.6 265.74 230.14 232.53 230.14 365.39 172.6 398.61 115.07 365.39"
+    />
+  </svg>
+</DocumentFragment>
+`;
diff --git a/packages/project-tailwind/src/index.ts b/packages/project-tailwind/src/index.ts
index cb651eee4..01d406e01 100644
--- a/packages/project-tailwind/src/index.ts
+++ b/packages/project-tailwind/src/index.ts
@@ -1,3 +1,4 @@
 import './styles/tailwind.css';
 
 export * from './components/Alert';
+export * from './components/Logo';
diff --git a/packages/project-tailwind/src/stories/Alert.stories.tsx b/packages/project-tailwind/src/stories/Alert.stories.tsx
index 669399ef0..0414e3d29 100644
--- a/packages/project-tailwind/src/stories/Alert.stories.tsx
+++ b/packages/project-tailwind/src/stories/Alert.stories.tsx
@@ -3,13 +3,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Alert } from '../components/Alert';
 
 export default {
-  argTypes: {
-    icon: {
-      defaultValue: <ExclamationTriangleIcon />,
-    },
-    message: {
-      defaultValue: 'Hello, world!',
-    },
+  args: {
+    icon: <ExclamationTriangleIcon />,
+    message: 'Hello, world!',
   },
   component: Alert,
 } as ComponentMeta<typeof Alert>;
diff --git a/packages/project-tailwind/src/stories/Logo.stories.tsx b/packages/project-tailwind/src/stories/Logo.stories.tsx
new file mode 100644
index 000000000..8196cb8d6
--- /dev/null
+++ b/packages/project-tailwind/src/stories/Logo.stories.tsx
@@ -0,0 +1,14 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Logo } from '../components/Logo';
+
+export default {
+  args: {
+    alt: 'Motech Development',
+    className: 'w-40 h-40 text-blue-600',
+  },
+  component: Logo,
+} as ComponentMeta<typeof Logo>;
+
+const Template: ComponentStory<typeof Logo> = (props) => <Logo {...props} />;
+
+export const LogoComponent = Template.bind({});