diff --git a/client/config-overrides.js b/client/config-overrides.js
new file mode 100644
index 0000000..a9fcefe
--- /dev/null
+++ b/client/config-overrides.js
@@ -0,0 +1,6 @@
+module.exports = {
+  jest: function(config) {
+    config.testMatch.push("<rootDir>/src/**/{spec,test}.{js,jsx,ts,tsx}");
+    return config;
+  }
+};
diff --git a/client/package-lock.json b/client/package-lock.json
index c190260..e20baeb 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -932,6 +932,24 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz",
       "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
+      "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
+      "requires": {
+        "@emotion/memoize": "0.7.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
+      "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
+      "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
+    },
     "@jest/console": {
       "version": "24.7.1",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
@@ -2185,6 +2203,22 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.2.tgz",
       "integrity": "sha512-CxwvxrZ9OirpXQ201Ec57OmGhmI8/ui/GwTDy0hSp6CmRvgRC0pSair6Z04Ck+JStA0sMPZzSJ3uE4n17EXpPQ=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz",
+      "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.10"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -2728,6 +2762,11 @@
         "map-obj": "^1.0.0"
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3792,6 +3831,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -3886,6 +3930,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz",
+      "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.28",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz",
@@ -9107,6 +9161,11 @@
         }
       }
     },
+    "memoize-one": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
+      "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -11372,6 +11431,32 @@
         "whatwg-fetch": "3.0.0"
       }
     },
+    "react-app-rewired": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.1.3.tgz",
+      "integrity": "sha512-NXC2EsQrnEMV7xD70rHcBq0B4PSEzjY/K2m/e+GRgit2jZO/uZApnpCZSKvIX2leLRN69Sqf2id0VXZ1F62CDw==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^6.0.5",
+        "dotenv": "^6.2.0",
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        }
+      }
+    },
     "react-dev-utils": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.0.tgz",
@@ -12943,6 +13028,34 @@
         "schema-utils": "^1.0.0"
       }
     },
+    "styled-components": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz",
+      "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/is-prop-valid": "^0.7.3",
+        "@emotion/unitless": "^0.7.0",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^2.2.2",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.5.4",
+        "react-is": "^16.6.0",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -12965,6 +13078,16 @@
         }
       }
     },
+    "stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+    },
+    "stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+    },
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
diff --git a/client/package.json b/client/package.json
index ffc211e..78fc1e7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -6,18 +6,20 @@
     "bulma": "^0.7.4",
     "bulma-extensions": "^6.2.4",
     "faker": "^4.1.0",
+    "lodash": "^4.17.11",
     "node-sass": "^4.11.0",
     "react": "v16.8.3",
     "react-dom": "v16.8.3",
     "react-json-editor-ajrm": "^2.5.9",
     "react-scripts": "3.0.0",
     "scrollreveal": "^4.0.5",
+    "styled-components": "^4.2.0",
     "uuid": "^3.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "REACT_APP_MOCKIT_API_URL=localhost react-scripts test",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "jest": {
@@ -40,6 +42,7 @@
     "dom-testing-library": "^3.19.1",
     "jest-dom": "^3.1.3",
     "nock": "^10.0.6",
+    "react-app-rewired": "^2.1.3",
     "react-testing-library": "^6.1.2"
   }
 }
diff --git a/client/src/App.js b/client/src/App.js
index 4cd7413..ed8e9e5 100755
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import useScrollReval from "./hooks/useScrollReveal";
-import RouteList from "./components/RouteList";
+import RouteListStack from "./components/RouteListStack";
+import RouteListGroup from "./components/RouteListGroup";
 import Logo from "./components/Logo";
 
 import { buildRoute, deleteRoute } from "./utils/routes-api";
@@ -9,21 +10,20 @@ import RouteModal from "./components/RouteModal";
 import SettingsModal from "./components/SettingsModal";
 import ConfirmationDialog from "./components/ConfirmationDialog";
 
-import { settings, routes } from "./config/routes.json";
+import { settings, routes as configRoutes } from "./config/routes.json";
 
 import "./scss/index.scss";
 
-export default function({ settings: propSettings }) {
-  useScrollReval([
-    { selector: ".hero .title, .card, .subtitle " },
-    { selector: ".route", options: { duration: 750, distance: "40px", easing: "cubic-bezier(0.5, -0.01, 0, 1.005)", interval: 64, origin: "bottom", viewFactor: 0.32 } }
-  ]);
+export default function({ settings: propSettings, customRoutes }) {
+  useScrollReval([{ selector: ".hero .title, .card, .subtitle " }]);
 
   const [selectedRoute, setSelectedRoute] = useState();
   const [routeToBeRemoved, setRouteToBeRemoved] = useState();
   const [settingsModalVisible, showSettingsModal] = useState(false);
 
-  const { features: { chaosMonkey = false } = {} } = propSettings || settings;
+  const routes = customRoutes || configRoutes;
+
+  const { features: { chaosMonkey = false, groupedRoutes = false } = {} } = propSettings || settings;
 
   return (
     <>
@@ -73,8 +73,17 @@ export default function({ settings: propSettings }) {
             <p className=" mb20 has-text-centered">The chaos monkey is enabled and causing havoc on all APIs...</p>
           </>
         )}
+        {routes.length === 0 && (
+          <p aria-label="no-routes" className="no-routes has-text-centered">
+            No routes found. Click "Add Route" to get started.
+          </p>
+        )}
 
-        <RouteList routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        {groupedRoutes ? (
+          <RouteListGroup routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        ) : (
+          <RouteListStack routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        )}
       </main>
       <footer className="footer" aria-label="Site footer">
         <div className="content has-text-centered">
diff --git a/client/src/components/Route/RouteItem.js b/client/src/components/Route/RouteItem.js
new file mode 100644
index 0000000..74a90c6
--- /dev/null
+++ b/client/src/components/Route/RouteItem.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+const RouteItem = ({ title, value }) => {
+  const buildAriaLabel = label => (label ? `route-${title.toLowerCase()}-${label}` : `route-${title.toLowerCase()}`);
+
+  return (
+    <div className="level-item has-text-centered" aria-label={buildAriaLabel()}>
+      <div>
+        <p className="heading" aria-label={buildAriaLabel("title")}>
+          {title}
+        </p>
+        <p className="title is-size-6" aria-label={buildAriaLabel("value")}>
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default RouteItem;
diff --git a/client/src/components/Route/index.js b/client/src/components/Route/index.js
new file mode 100644
index 0000000..cc580c3
--- /dev/null
+++ b/client/src/components/Route/index.js
@@ -0,0 +1,54 @@
+import React from "react";
+import url from "url";
+import RouteItem from "./RouteItem";
+
+import { MOCKIT_SERVER_URL } from "../../utils/consts";
+
+const Route = ({ routeItem, onRouteDelete, onRouteEdit }) => {
+  const { delay = 0, route, statusCode, httpMethod, disabled = false } = routeItem;
+  const routeClassName = disabled ? "disabled" : "";
+
+  const openRoute = route => {
+    return () => {
+      window.open(url.resolve(MOCKIT_SERVER_URL, route), "_blank");
+    };
+  };
+
+  const editRoute = event => {
+    event.stopPropagation();
+    onRouteEdit(routeItem);
+  };
+
+  const deleteRoute = event => {
+    event.stopPropagation();
+    onRouteDelete(routeItem);
+  };
+
+  return (
+    <div className="column is-full">
+      <div className={`route ${routeClassName}`} onClick={openRoute(route)} aria-label="Route">
+        <nav className="level">
+          <RouteItem title="Route" value={route} />
+          <RouteItem title="Delay" value={`${delay} ms`} />
+          <RouteItem title="Status Code" value={statusCode} />
+          <RouteItem title="HTTP" value={httpMethod} />
+
+          <div className="level-item has-text-centered">
+            <div>
+              <p className="title is-size-4">
+                <button className="button is-info mr10" onClick={editRoute} aria-label="Edit Route">
+                  <strong>Edit</strong>
+                </button>
+                <button className="button is-danger" onClick={deleteRoute} aria-label="Delete Route">
+                  <strong>Delete</strong>
+                </button>
+              </p>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
+};
+
+export default Route;
diff --git a/client/src/components/Route/spec.js b/client/src/components/Route/spec.js
new file mode 100644
index 0000000..784b7be
--- /dev/null
+++ b/client/src/components/Route/spec.js
@@ -0,0 +1,74 @@
+// __tests__/fetch.test.js
+import React from "react";
+import { render, fireEvent, cleanup } from "react-testing-library";
+import "jest-dom/extend-expect";
+import Route from "./";
+import RouteItem from "./RouteItem";
+
+afterEach(cleanup);
+
+const buildRoute = () => ({
+  id: "1",
+  route: "/test",
+  delay: "500",
+  statusCode: "200",
+  httpMethod: "GET"
+});
+
+describe("Route", () => {
+  describe("renders", () => {
+    it("renders the route, delay, statuscode, http method rendered", () => {
+      const { getByLabelText, getAllByLabelText, getByText } = render(<Route routeItem={buildRoute()} />);
+      const routes = getAllByLabelText("Route");
+      const route = routes[0];
+
+      expect(getByLabelText("route-route")).toBeVisible();
+      expect(getByText("/test", route)).toBeVisible();
+      expect(getByText("500 ms", route)).toBeVisible();
+      expect(getByText("200", route)).toBeVisible();
+      expect(getByText("GET", route)).toBeVisible();
+    });
+
+    it("the route renders with an edit and delete button", () => {
+      const { getByLabelText } = render(<Route routeItem={buildRoute()} />);
+      expect(getByLabelText("Edit Route")).toBeVisible();
+      expect(getByLabelText("Delete Route")).toBeVisible();
+    });
+  });
+
+  describe("props and actions", () => {
+    describe("onRouteEdit", () => {
+      it("is called when the edit route button is clicked", () => {
+        const spy = jest.fn();
+        const { getByLabelText } = render(<Route routeItem={buildRoute()} onRouteEdit={spy} />);
+        fireEvent.click(getByLabelText("Edit Route"));
+        expect(spy).toHaveBeenCalled();
+      });
+    });
+    describe("onRouteDelete", () => {
+      it("is called when the delete route button is clicked", () => {
+        const spy = jest.fn();
+        const { getByLabelText } = render(<Route routeItem={buildRoute()} onRouteDelete={spy} />);
+        fireEvent.click(getByLabelText("Delete Route"));
+        expect(spy).toHaveBeenCalled();
+      });
+    });
+
+    it.only("when clicking on the route the user is navigated to that route in the browser", () => {
+      const globalOpen = global.open;
+      global.open = jest.fn();
+      const { getByLabelText } = render(<Route routeItem={buildRoute()} />);
+      fireEvent.click(getByLabelText("Route"));
+      expect(global.open).toBeCalledWith("localhost:/test", "_blank");
+      global.open = globalOpen;
+    });
+  });
+
+  describe("RouteItem", () => {
+    it("renders the given title and value", () => {
+      const { getByLabelText } = render(<RouteItem title="TestTitle" value="TestValue" />);
+      expect(getByLabelText("route-testtitle-title")).toHaveTextContent("TestTitle");
+      expect(getByLabelText("route-testtitle-value")).toHaveTextContent("TestValue");
+    });
+  });
+});
diff --git a/client/src/components/RouteList/index.js b/client/src/components/RouteList/index.js
deleted file mode 100644
index 6735aa3..0000000
--- a/client/src/components/RouteList/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useState } from "react";
-import url from "url";
-import { MOCKIT_SERVER_URL } from "../../utils/consts";
-
-const openRoute = route => {
-  return () => {
-    window.open(url.resolve(MOCKIT_SERVER_URL, route), "_blank");
-  };
-};
-
-const RouteItem = function({ title, value }) {
-  const buildAriaLabel = label => (label ? `route-${title.toLowerCase()}-${label}` : `route-${title.toLowerCase()}`);
-
-  return (
-    <div className="level-item has-text-centered" aria-label={buildAriaLabel()}>
-      <div>
-        <p className="heading" aria-label={buildAriaLabel("title")}>
-          {title}
-        </p>
-        <p className="title is-size-6" aria-label={buildAriaLabel("value")}>
-          {value}
-        </p>
-      </div>
-    </div>
-  );
-};
-
-const Routes = function(props) {
-  const { onRouteEdit = () => {}, onRouteDelete = () => {}, routes = [] } = props;
-
-  const editRoute = item => {
-    return event => {
-      event.stopPropagation();
-      onRouteEdit(item);
-    };
-  };
-
-  const deleteRoute = item => {
-    return event => {
-      event.stopPropagation();
-      onRouteDelete(item);
-    };
-  };
-
-  return (
-    <>
-      {routes.length === 0 && <p className="no-routes has-text-centered">No routes found. Click "Add Route" to get started.</p>}
-      {routes.map(item => {
-        const { delay = 0, route, statusCode, httpMethod, disabled = false } = item;
-        const routeClassName = disabled ? "disabled" : "";
-        return (
-          <div className="columns" key={route} aria-label="Route">
-            <div className="column is-full">
-              <div className={`route ${routeClassName}`} onClick={openRoute(route)}>
-                <nav className="level">
-                  <RouteItem title="Route" value={route} />
-                  <RouteItem title="Delay" value={`${delay} ms`} />
-                  <RouteItem title="Status Code" value={statusCode} />
-                  <RouteItem title="HTTP" value={httpMethod} />
-
-                  <div className="level-item has-text-centered">
-                    <div>
-                      <p className="title is-size-4">
-                        <a className="button is-info mr10" onClick={editRoute(item)} aria-label="Edit Route">
-                          <strong>Edit</strong>
-                        </a>
-                        <a className="button is-danger" onClick={deleteRoute(item)} aria-label="Delete Route">
-                          <strong>Delete</strong>
-                        </a>
-                      </p>
-                    </div>
-                  </div>
-                </nav>
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </>
-  );
-};
-
-export default Routes;
diff --git a/client/src/components/RouteList/spec.js b/client/src/components/RouteList/spec.js
deleted file mode 100644
index 71adcc5..0000000
--- a/client/src/components/RouteList/spec.js
+++ /dev/null
@@ -1,72 +0,0 @@
-// __tests__/fetch.test.js
-import React from "react";
-import { render, fireEvent, cleanup } from "react-testing-library";
-import "jest-dom/extend-expect";
-import RouteList from "./";
-
-afterEach(cleanup);
-
-const buildRoutes = () => {
-  return [
-    {
-      id: "1",
-      route: "/test",
-      delay: "500",
-      statusCode: "200",
-      httpMethod: "GET"
-    },
-    {
-      id: "2",
-      route: "/test2",
-      delay: "0",
-      statusCode: "200",
-      httpMethod: "GET"
-    }
-  ];
-};
-
-describe("RouteList", () => {
-  describe("renders", () => {
-    it("the list of given routes", () => {
-      const { getAllByLabelText } = render(<RouteList routes={buildRoutes()} />);
-      const routes = getAllByLabelText("Route");
-      expect(routes.length).toBe(2);
-    });
-    it("a route has the route, delay, statuscode, http method rendered", () => {
-      const { getByLabelText, getAllByLabelText, getByText } = render(<RouteList routes={buildRoutes()} />);
-      const routes = getAllByLabelText("Route");
-      const route = routes[0];
-
-      expect(getByLabelText("route-route")).toBeVisible();
-      expect(getByText("/test", route)).toBeVisible();
-      expect(getByText("500 ms", route)).toBeVisible();
-      expect(getByText("200", route)).toBeVisible();
-      expect(getByText("GET", route)).toBeVisible();
-    });
-
-    it("the route renders with an edit and delete button", () => {
-      const { getByLabelText } = render(<RouteList routes={buildRoutes()} />);
-      expect(getByLabelText("Edit Route")).toBeVisible();
-      expect(getByLabelText("Delete Route")).toBeVisible();
-    });
-  });
-
-  describe("props", () => {
-    describe("onRouteEdit", () => {
-      it("is called when the edit route button is clicked", () => {
-        const spy = jest.fn();
-        const { getByLabelText } = render(<RouteList routes={buildRoutes()} onRouteEdit={spy} />);
-        fireEvent.click(getByLabelText("Edit Route"));
-        expect(spy).toHaveBeenCalled();
-      });
-    });
-    describe("onRouteDelete", () => {
-      it("is called when the delete route button is clicked", () => {
-        const spy = jest.fn();
-        const { getByLabelText } = render(<RouteList routes={buildRoutes()} onRouteDelete={spy} />);
-        fireEvent.click(getByLabelText("Delete Route"));
-        expect(spy).toHaveBeenCalled();
-      });
-    });
-  });
-});
diff --git a/client/src/components/RouteListGroup/index.js b/client/src/components/RouteListGroup/index.js
new file mode 100644
index 0000000..fca946d
--- /dev/null
+++ b/client/src/components/RouteListGroup/index.js
@@ -0,0 +1,109 @@
+import React, { useMemo } from "react";
+import Route from "../Route";
+import styled from "styled-components";
+import _ from "lodash";
+
+const Wrapper = styled.details`
+  padding-left: 20px;
+`;
+
+const RouteTitle = styled.summary`
+  color: #1d1d1d;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 1.3em;
+  padding-left: 50px;
+  position: relative;
+
+  &:before {
+    position: absolute;
+    content: " ";
+    height: 2px;
+    background-color: #209cee;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: -1;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-details-marker {
+    background: white;
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+`;
+
+const RouteTitleText = styled.span`
+  background-color: white;
+  padding-right: 10px;
+  margin-left: -10px;
+`;
+
+const renderLevel = (routes, onRouteEdit, onRouteDelete, index = 0) => {
+  return (
+    <React.Fragment>
+      {_.map(routes, (item, key) => {
+        const hasChildren = _.size(_.omit(item, ["children"])) > 0;
+        const itemIndex = hasChildren ? index + 1 : index;
+
+        return (
+          <Wrapper open key={key} aria-label={`route-group-${key}`}>
+            <RouteTitle>
+              <RouteTitleText aria-label="route-group-header">/{key}</RouteTitleText>
+            </RouteTitle>
+            {hasChildren && <Route routeItem={item} onRouteDelete={onRouteDelete} onRouteEdit={onRouteEdit} />}
+            {_.size(item.children) > 0 && renderLevel(item.children, onRouteEdit, onRouteDelete, itemIndex)}
+          </Wrapper>
+        );
+      })}
+    </React.Fragment>
+  );
+};
+
+export default function({ routes, onRouteDelete, onRouteEdit }) {
+  const groupedRoutes = useMemo(() => {
+    // We need to order routes by route length. Otherwise, if a deeper router would appear
+    // before a a shallower route, the shallow route would overwrite the deep route
+    // when using _.set
+    const orderedRoutes = _.orderBy(routes, route => {
+      return route.route.split("/").length;
+    });
+
+    const routesObject = {};
+    orderedRoutes.forEach(route => {
+      const paths = route.route.split("/");
+      const routeDepth = paths.length;
+      const parentPath = paths.slice(1, paths.length - 1);
+      const lastLevel = paths[paths.length - 1];
+
+      // routes with a depth lower than three are the first-level routes since all routes
+      // start with a slash, so their split path becomes ['', 'path']
+      if (routeDepth < 3) {
+        routesObject[lastLevel] = {
+          ...route,
+          children: {}
+        };
+      } else {
+        let pathToChild = [];
+        parentPath.forEach((parent, index) => {
+          const currentLevelPath = parentPath.slice(0, index + 1);
+          const currentLevelPathWithChildren = [];
+          currentLevelPath.forEach(path => {
+            currentLevelPathWithChildren.push(path, "children");
+          });
+          pathToChild = currentLevelPathWithChildren;
+        });
+        _.set(routesObject, [...pathToChild, lastLevel], { ...route });
+      }
+    });
+
+    return routesObject;
+  }, [routes]);
+
+  return <div aria-label="routes-grouped">{renderLevel(groupedRoutes, onRouteEdit, onRouteDelete)}</div>;
+}
diff --git a/client/src/components/RouteListGroup/spec.js b/client/src/components/RouteListGroup/spec.js
new file mode 100644
index 0000000..9b89c0c
--- /dev/null
+++ b/client/src/components/RouteListGroup/spec.js
@@ -0,0 +1,61 @@
+// __tests__/fetch.test.js
+import React from "react";
+import { render, cleanup } from "react-testing-library";
+import "jest-dom/extend-expect";
+import RouteListGroup from "./";
+
+afterEach(cleanup);
+
+const buildRoutes = () => {
+  return [
+    {
+      id: "1",
+      route: "/test",
+      delay: "500",
+      statusCode: "200",
+      httpMethod: "GET"
+    },
+    {
+      id: "2",
+      route: "/test/test2",
+      delay: "500",
+      statusCode: "200",
+      httpMethod: "GET"
+    },
+    {
+      id: "1",
+      route: "/test/test2/test3",
+      delay: "500",
+      statusCode: "200",
+      httpMethod: "GET"
+    },
+    {
+      id: "1",
+      route: "/test/test2/test3/test4",
+      delay: "500",
+      statusCode: "200",
+      httpMethod: "GET"
+    }
+  ];
+};
+
+describe("RouteListGroup", () => {
+  describe("renders", () => {
+    it.only("the list of given routes with their own groups based of the route path", () => {
+      const { getAllByLabelText, getByLabelText, getByText } = render(<RouteListGroup routes={buildRoutes()} />);
+      const routes = getAllByLabelText("Route");
+
+      expect(getByLabelText("route-group-test")).toBeVisible();
+      expect(getByLabelText("route-group-test2")).toBeVisible();
+      expect(getByLabelText("route-group-test3")).toBeVisible();
+      expect(getByLabelText("route-group-test4")).toBeVisible();
+
+      expect(getByText("/test")).toBeVisible();
+      expect(getByText("/test2")).toBeVisible();
+      expect(getByText("/test3")).toBeVisible();
+      expect(getByText("/test4")).toBeVisible();
+
+      expect(routes).toHaveLength(4);
+    });
+  });
+});
diff --git a/client/src/components/RouteListStack/index.js b/client/src/components/RouteListStack/index.js
new file mode 100644
index 0000000..b148a5b
--- /dev/null
+++ b/client/src/components/RouteListStack/index.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+import Route from "../Route";
+
+const Routes = function({ routes = [], onRouteEdit = () => {}, onRouteDelete = () => {} }) {
+  return (
+    <div aria-label="routes-stacked">
+      {routes.map((route, key) => (
+        <Route routeItem={route} key={key} onRouteEdit={onRouteEdit} onRouteDelete={onRouteDelete} />
+      ))}
+    </div>
+  );
+};
+
+export default Routes;
diff --git a/client/src/components/RouteListStack/spec.js b/client/src/components/RouteListStack/spec.js
new file mode 100644
index 0000000..6379bd8
--- /dev/null
+++ b/client/src/components/RouteListStack/spec.js
@@ -0,0 +1,50 @@
+// __tests__/fetch.test.js
+import React from "react";
+import { render, fireEvent, cleanup } from "react-testing-library";
+import "jest-dom/extend-expect";
+import RouteListStack from "./";
+
+afterEach(cleanup);
+
+const buildRoutes = () => {
+  return [
+    {
+      id: "1",
+      route: "/test",
+      delay: "500",
+      statusCode: "200",
+      httpMethod: "GET"
+    },
+    {
+      id: "2",
+      route: "/test2",
+      delay: "0",
+      statusCode: "200",
+      httpMethod: "GET"
+    }
+  ];
+};
+
+describe("RouteListStack", () => {
+  describe("renders", () => {
+    it("the list of given routes", () => {
+      const { getAllByLabelText } = render(<RouteListStack routes={buildRoutes()} />);
+      const routes = getAllByLabelText("Route");
+      expect(routes.length).toBe(2);
+    });
+  });
+  describe("props", () => {
+    it("when the user clicks on the edit button on the rendered route the given `onRouteEdit` callback is triggered", () => {
+      const spy = jest.fn();
+      const { getByLabelText } = render(<RouteListStack routes={buildRoutes()} onRouteEdit={spy} />);
+      fireEvent.click(getByLabelText("Edit Route"));
+      expect(spy).toHaveBeenCalled();
+    });
+    it("when the user clicks on the delete button on the rendered route the given `onRouteDelete` callback is triggered", () => {
+      const spy = jest.fn();
+      const { getByLabelText } = render(<RouteListStack routes={buildRoutes()} onRouteDelete={spy} />);
+      fireEvent.click(getByLabelText("Delete Route"));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/client/src/components/SettingsModal/index.js b/client/src/components/SettingsModal/index.js
index 221e519..a813513 100644
--- a/client/src/components/SettingsModal/index.js
+++ b/client/src/components/SettingsModal/index.js
@@ -5,7 +5,7 @@ import { updateSettings } from "../../utils/routes-api";
 const SettingsModal = function({ onClose = () => {}, onConfirm = () => {}, heading, children } = {}) {
   const [settings, setSettings] = useState(applicationSettings);
 
-  const { features: { chaosMonkey, cors, authentication } = {} } = settings;
+  const { features: { chaosMonkey, cors, authentication, groupedRoutes } = {} } = settings;
 
   const setFeature = (feature, value) => {
     const newSettings = {
@@ -88,6 +88,23 @@ const SettingsModal = function({ onClose = () => {}, onConfirm = () => {}, headi
                 <label htmlFor="chaosMonkeyFeature">Enable Monkey 🙊</label>
               </div>
             </div>
+            <hr />
+            <div className="field" aria-label="feature-grouped-routes">
+              <label className="label">Group routes</label>
+              <p className="mb10">With the ability to group routes, you can quickly hide a whole list of routes that share the same basepath.</p>
+              <div className="control">
+                <input
+                  id="groupedRoutesFeature"
+                  type="checkbox"
+                  name="groupedRoutesFeature"
+                  className="switch is-primary"
+                  checked={groupedRoutes}
+                  onChange={e => setFeature("groupedRoutes", e.target.checked)}
+                  aria-label="feature-grouped-routes-input"
+                />
+                <label htmlFor="groupedRoutesFeature">Enable Grouped Routes</label>
+              </div>
+            </div>
           </section>
 
           <footer className="modal-card-foot">
diff --git a/client/src/components/SettingsModal/spec.js b/client/src/components/SettingsModal/spec.js
index 0fd9715..fabd67b 100644
--- a/client/src/components/SettingsModal/spec.js
+++ b/client/src/components/SettingsModal/spec.js
@@ -65,6 +65,21 @@ describe("Settings Dialog", () => {
         expect(getByLabelText("feature-chaos-monkey-input").checked).toEqual(true);
       });
     });
+    describe("Grouped Routes", () => {
+      it("renders the feature with an input", () => {
+        const { getByLabelText } = render(<SettingsDialog />);
+        expect(getByLabelText("feature-grouped-routes")).toBeVisible();
+        expect(getByLabelText("feature-grouped-routes-input")).toBeVisible();
+      });
+
+      it("clicking on the feature enables grouped routes and updates the input value", () => {
+        const { getByLabelText } = render(<SettingsDialog />);
+
+        expect(getByLabelText("feature-grouped-routes-input").checked).toEqual(false);
+        fireEvent.change(getByLabelText("feature-grouped-routes-input"), { target: { checked: true } });
+        expect(getByLabelText("feature-grouped-routes-input").checked).toEqual(true);
+      });
+    });
   });
 
   describe("saving settings", () => {
diff --git a/client/src/config/routes.json b/client/src/config/routes.json
index d047c6a..0668e7b 100644
--- a/client/src/config/routes.json
+++ b/client/src/config/routes.json
@@ -2,6 +2,7 @@
   "settings": {
     "features": {
       "chaosMonkey": false,
+      "groupedRoutes": false,
       "cors": true,
       "authentication": false
     },
@@ -23,6 +24,18 @@
       "statusCode": "201",
       "delay": "500"
     },
+    {
+      "id": "1f4dfdf3-5712-48b7-9310-6314f8ee2adc",
+      "route": "/user/boyney123",
+      "payload": {
+        "httpMethod": "get",
+        "newRoute": true,
+        "Money": 100
+      },
+      "httpMethod": "POST",
+      "statusCode": "201",
+      "delay": "500"
+    },
     {
       "id": "1f4dfdf3-5712-48b7-9310-6314f8ee2add",
       "route": "/fruit",
diff --git a/client/src/scss/App.scss b/client/src/scss/App.scss
index 683730d..ad4cf52 100644
--- a/client/src/scss/App.scss
+++ b/client/src/scss/App.scss
@@ -54,7 +54,6 @@ main {
 }
 
 .hero .title,
-.route,
 .subtitle {
   visibility: hidden;
 }
diff --git a/client/src/spec.js b/client/src/spec.js
index 055241d..825ce3d 100644
--- a/client/src/spec.js
+++ b/client/src/spec.js
@@ -1,6 +1,6 @@
 // __tests__/fetch.test.js
 import React from "react";
-import { render, fireEvent, cleanup, waitForElement, queryAllByLabelText } from "react-testing-library";
+import { render, fireEvent, cleanup, queryAllByLabelText } from "react-testing-library";
 import * as utils from "./utils/routes-api";
 import "jest-dom/extend-expect";
 import App from "./App";
@@ -25,10 +25,24 @@ describe("App", () => {
       expect(getByLabelText("Settings")).toBeVisible();
     });
 
-    it("renders a list of routes based on the routes in the configuration", () => {
-      const { container } = render(<App />);
+    it("renders a list of stacked routes based on the routes in the configuration", () => {
+      const { container, getByLabelText } = render(<App />);
       const routes = queryAllByLabelText(container, "Route");
-      expect(routes).toHaveLength(2);
+      expect(routes).toHaveLength(3);
+      expect(getByLabelText("routes-stacked")).toBeVisible();
+    });
+
+    it("renders a list of routes that are grouped in the grouped feature is set to true", () => {
+      const settings = { features: { groupedRoutes: true } };
+      const { container, getByLabelText } = render(<App settings={settings} />);
+      const routes = queryAllByLabelText(container, "Route");
+      expect(routes).toHaveLength(3);
+      expect(getByLabelText("routes-grouped")).toBeVisible();
+    });
+
+    it("renders the no routes message when no routes have been added yet", () => {
+      const { getByLabelText } = render(<App customRoutes={[]} />);
+      expect(getByLabelText("no-routes")).toBeVisible();
     });
 
     it("renders a footer on the screen with a link to the github repo", () => {
@@ -39,7 +53,56 @@ describe("App", () => {
     });
   });
 
-  describe("Route list", () => {
+  describe("RouteListGrouped", () => {
+    describe("edit route", () => {
+      it("when edit is selected on the route the modal dialog is shown with that route", () => {
+        const settings = { features: { groupedRoutes: true } };
+        const { container, getByTestId, getByLabelText } = render(<App settings={settings} />);
+        const routes = queryAllByLabelText(container, "Route");
+        const editButton = getByLabelText("Edit Route", { element: routes[0] });
+
+        fireEvent(
+          editButton,
+          new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true
+          })
+        );
+
+        expect(getByTestId("route-modal")).toBeVisible();
+      });
+    });
+
+    describe("delete route", () => {
+      const clickDeleteRoute = () => {
+        const settings = { features: { groupedRoutes: true } };
+        const { getByLabelText, container, getByText } = render(<App settings={settings} />);
+        const routes = queryAllByLabelText(container, "Route");
+        const deleteButton = getByLabelText("Delete Route", { element: routes[0] });
+
+        fireEvent.click(deleteButton);
+
+        return { getByLabelText, getByText };
+      };
+
+      it("when delete is selected on the route the confirmation dialog is shown on that route", () => {
+        const { getByLabelText } = clickDeleteRoute();
+        expect(getByLabelText("Confirmation Dialog")).toBeVisible();
+      });
+
+      it("when clicking confirm on the route deletion a request is made to delete that route", () => {
+        const { getByLabelText, getByText } = clickDeleteRoute();
+
+        const modal = getByLabelText("Confirmation Dialog");
+
+        fireEvent.click(getByText("Delete", { element: modal }));
+
+        expect(utils.deleteRoute).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("RouteListStacked", () => {
     describe("edit route", () => {
       it("when edit is selected on the route the modal dialog is shown with that route", () => {
         const { container, getByTestId, getByLabelText } = render(<App />);