diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index ffa3b7c7..ec6c9ce7 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -160,6 +160,7 @@
   },
   "services": {
     "ui": {
+      "collapsed": [],
       "sections": [
         "summary",
         "instances",
diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js
index 3f7edba6..739bc96a 100644
--- a/frontend/src/state/actions.js
+++ b/frontend/src/state/actions.js
@@ -10,5 +10,6 @@ const APP = constantCase(process.env['APP_NAME']);
 module.exports = {
   ...require('@state/thunks'),
   updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
-  toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`)
+  toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
+  toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`)
 };
diff --git a/frontend/src/state/reducers/services.js b/frontend/src/state/reducers/services.js
index 7fec06fb..4a6311db 100644
--- a/frontend/src/state/reducers/services.js
+++ b/frontend/src/state/reducers/services.js
@@ -1,9 +1,23 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  toggleServiceCollapsed
+} = actions;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [toggleServiceCollapsed.toString()]: (state, action) => ({
+    ...state,
+    ui: {
+      ...state.ui,
+      collapsed: state.ui.collapsed.indexOf(action.payload) >= 0
+        ? state.ui.collapsed.filter((uuid) => uuid !== action.payload)
+        : [...state.ui.collapsed, action.payload]
+    }
+  })
 }, {});
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index be168d92..f9da01c7 100644
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@@ -15,6 +15,7 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
 const orgs = (state) => get(state, 'orgs.data', []);
 const projects = (state) => get(state, 'projects.data', []);
 const services = (state) => get(state, 'services.data', []);
+const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
 const instances = (state) => get(state, 'instances.data', []);
 
 const projectById = (projectId) => createSelector(
@@ -45,19 +46,28 @@ const orgSections = (orgId) => createSelector(
 );
 
 const servicesByProjectId = (projectId) => createSelector(
-  [services, projectById(projectId)],
-  (services, project) =>
+  [services, projectById(projectId), collapsedServices],
+  (services, project, collapsed) =>
     services.filter((s) => s.project === project.uuid)
     .map((service) => ({
       ...service,
       services: services.filter((s) => s.parent === service.uuid)
     }))
     .filter((s) => !s.parent)
+    .map((service) => ({
+      ...service,
+      collapsed: collapsed.indexOf(service.uuid) >= 0,
+      services: service.services.map((service) => ({
+        ...service,
+        collapsed: collapsed.indexOf(service.uuid) >= 0
+      }))
+    }))
 );
 
 const instancesByServiceId = (serviceId) => createSelector(
   [instances, serviceById(serviceId)],
-  (instances, service) => instances.filter((i) => i.service === service.uuid)
+  (instances, service) =>
+    instances.filter((i) => i.service === service.uuid)
 );