diff --git a/src/hmrc-design-patterns/bar-chart/index.njk b/src/hmrc-design-patterns/bar-chart/index.njk
new file mode 100644
index 000000000..563735a1c
--- /dev/null
+++ b/src/hmrc-design-patterns/bar-chart/index.njk
@@ -0,0 +1,65 @@
+---
+title: Bar chart
+menuText: Bar chart
+layout: twoColumnPage.njk
+status: development
+---
+{% from "_example.njk" import example %}
+{% from "hmrcFrontendInfo.njk" import hmrcFrontendInfo %}
+
+
+{% block content %}
+
+
+
Health
+ (21.9%)
+
+ £1,231
+
+
+
+
+
+
+
+
Welfare
+ (19.6%)
+
+ £1,111
+
+
+
+
+
+
+
+
Business and Industry
+ (14.4%)
+
+ £816
+
+
+
+
+
+
+
+
State pensions
+ (10.1%)
+
+ £572
+
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/hmrc-design-patterns/bar-chart/style.css b/src/hmrc-design-patterns/bar-chart/style.css
new file mode 100644
index 000000000..1bad764ed
--- /dev/null
+++ b/src/hmrc-design-patterns/bar-chart/style.css
@@ -0,0 +1,7 @@
+.graph-green-bar {
+ border-bottom: 10px solid #28a197;
+}
+
+.graph-grey-bar {
+ border-top: 2px solid #b1b4b6;
+}