diff --git a/frontend/locales/en-us.json b/frontend/locales/en-us.json
index 0efcd962..8262cd3b 100644
--- a/frontend/locales/en-us.json
+++ b/frontend/locales/en-us.json
@@ -9,6 +9,7 @@
"create-new": "Create a new",
"add-services": "Add services",
"no-services": "You don’t have any services. You can either add them by editing a manifest file or by connecting your repo on GitHub or BitBucket.",
+ "no-projects": "You don’t have any projects.",
"edit-project-manifest": "Edit project manifest",
"or-bring-in-from": "or bring in from",
"your-settings": "Your settings",
diff --git a/frontend/src/components/empty/projects.js b/frontend/src/components/empty/projects.js
new file mode 100644
index 00000000..f9bac6ae
--- /dev/null
+++ b/frontend/src/components/empty/projects.js
@@ -0,0 +1,19 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+
+const Column = require('@ui/components/column');
+const Row = require('@ui/components/row');
+
+const {
+ FormattedMessage
+} = ReactIntl;
+
+module.exports = () => (
+
+
+
+
+
+
+
+);
diff --git a/frontend/src/components/empty/services.js b/frontend/src/components/empty/services.js
new file mode 100644
index 00000000..0ca25851
--- /dev/null
+++ b/frontend/src/components/empty/services.js
@@ -0,0 +1,43 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+
+const Button = require('@ui/components/button');
+const Column = require('@ui/components/column');
+const Row = require('@ui/components/row');
+
+const {
+ FormattedMessage
+} = ReactIntl;
+
+module.exports = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/frontend/src/containers/projects/index.js b/frontend/src/containers/projects/index.js
index 4e291c41..9af5b747 100644
--- a/frontend/src/containers/projects/index.js
+++ b/frontend/src/containers/projects/index.js
@@ -5,6 +5,7 @@ const ReactRouter = require('react-router');
const Button = require('@ui/components/button');
const Column = require('@ui/components/column');
+const EmptyProjects = require('@components/empty/projects');
const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
const selectors = require('@state/selectors');
@@ -31,13 +32,7 @@ const Projects = ({
projects = []
}) => {
const empty = projects.length ? null : (
-
-
-
-
-
-
-
+
);
const _projects = projects.map((project) => (
diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js
index f03d507f..244cae8f 100644
--- a/frontend/src/containers/services/index.js
+++ b/frontend/src/containers/services/index.js
@@ -1,10 +1,8 @@
const React = require('react');
-const ReactIntl = require('react-intl');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router');
-const Button = require('@ui/components/button');
-const Column = require('@ui/components/column');
+const EmptyServices = require('@components/empty/services');
const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
const selectors = require('@state/selectors');
@@ -13,10 +11,6 @@ const {
connect
} = ReactRedux;
-const {
- FormattedMessage
-} = ReactIntl;
-
const {
orgByIdSelector,
projectByIdSelector,
@@ -27,39 +21,6 @@ const {
Link
} = ReactRouter;
-const EmptyServices = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
const Services = ({
org = {},
project = {},