diff --git a/src/wmnds/assets/icon/general/user.svg b/src/wmnds/assets/icon/general/user.svg
new file mode 100644
index 000000000..f9093d954
--- /dev/null
+++ b/src/wmnds/assets/icon/general/user.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/wmnds/components/_components.scss b/src/wmnds/components/_components.scss
index 17751cd69..eb2cb9e6d 100644
--- a/src/wmnds/components/_components.scss
+++ b/src/wmnds/components/_components.scss
@@ -16,6 +16,7 @@
@import "icon/n-icon/n-icon"; // Styles for n-icon text replacement
@import "message/message"; // Messages
@import "phase-indicator/phase-indicator"; // Phase indicator
+@import "sign-in/sign-in"; // Phase indicator
@import "table/table"; // Table
@import "ticket-summary-message/ticket-summary-message"; // Ticket summary message
@import "warning-text/warning-text"; // Warning Text
diff --git a/src/wmnds/components/sign-in/_example.njk b/src/wmnds/components/sign-in/_example.njk
new file mode 100644
index 000000000..a1adb36f7
--- /dev/null
+++ b/src/wmnds/components/sign-in/_example.njk
@@ -0,0 +1,5 @@
+{% raw %}
+{% from "wmnds/components/sign-in/_sign-in.njk" import wmndsSignIn %}
+
+{{ wmndsSignIn() }}
+{% endraw %}
diff --git a/src/wmnds/components/sign-in/_sign-in.njk b/src/wmnds/components/sign-in/_sign-in.njk
new file mode 100644
index 000000000..438b2719d
--- /dev/null
+++ b/src/wmnds/components/sign-in/_sign-in.njk
@@ -0,0 +1,29 @@
+{% macro wmndsSignIn(params) %}
+
+{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
+
+
+
+{% endmacro %}
diff --git a/src/wmnds/components/sign-in/_sign-in.scss b/src/wmnds/components/sign-in/_sign-in.scss
new file mode 100644
index 000000000..a268454a5
--- /dev/null
+++ b/src/wmnds/components/sign-in/_sign-in.scss
@@ -0,0 +1,16 @@
+.wmnds-sign-in {
+ padding: $size-sm 0;
+ color: $white;
+ background-color: get-color(primary, 50, dark);
+
+ &__link {
+ color: $white;
+ font-family: $x-heading-font-family;
+ font-weight: 700;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/src/www/data.njk.json b/src/www/data.njk.json
index 9d628e85a..9f2f3a600 100644
--- a/src/www/data.njk.json
+++ b/src/www/data.njk.json
@@ -153,6 +153,9 @@
{
"name": "Phase indicator"
},
+ {
+ "name": "Sign in"
+ },
{
"name": "Table"
},
diff --git a/src/www/pages/components/sign-in/index.njk.md b/src/www/pages/components/sign-in/index.njk.md
new file mode 100644
index 000000000..cf9c80f25
--- /dev/null
+++ b/src/www/pages/components/sign-in/index.njk.md
@@ -0,0 +1,48 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Sign in or register" %}
+
+{% block content %}
+
+{% markdown %}
+
+{# About #}
+
+## About
+
+{# What #}
+
+### What does it do?
+
+- Links to Unicard registration and account log in page
+
+{# When #}
+
+### When to use it?
+
+- On Swift content pages only.
+
+### When not to use it?
+
+- On other Transport for West Midlands content pages
+
+### How it works
+
+- Banner appears at the top of the page, above global navigation banner and links to Unicard registration and account log in page
+
+{% endmarkdown %}
+
+{% from "wmnds/components/sign-in/_sign-in.njk" import wmndsSignIn %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{{
+ compExample([
+ wmndsSignIn()
+ ], {
+ componentPath: "wmnds/components/sign-in/",
+ njk: true,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% endblock %}
diff --git a/src/www/pages/styles/icons/index.njk.md b/src/www/pages/styles/icons/index.njk.md
index 72e129640..691b4dbed 100644
--- a/src/www/pages/styles/icons/index.njk.md
+++ b/src/www/pages/styles/icons/index.njk.md
@@ -43,6 +43,7 @@
"sync",
"ticket",
"trash",
+ "user",
"wallet",
"warning-circle",
"warning-triangle"