diff --git a/e2e/tests/ui-driven/src/create-flow/helpers.ts b/e2e/tests/ui-driven/src/create-flow/helpers.ts
index edaea7b683..842cf6e430 100644
--- a/e2e/tests/ui-driven/src/create-flow/helpers.ts
+++ b/e2e/tests/ui-driven/src/create-flow/helpers.ts
@@ -29,6 +29,6 @@ export async function getTeamPage({
   teamName: string;
 }): Promise<Page> {
   const page = await getAdminPage({ browser, userId });
-  await page.locator("h2", { hasText: teamName }).click();
+  await page.locator("h3", { hasText: teamName }).click();
   return page;
 }
diff --git a/e2e/tests/ui-driven/src/login.spec.ts b/e2e/tests/ui-driven/src/login.spec.ts
index ea7df20615..62481fc98c 100644
--- a/e2e/tests/ui-driven/src/login.spec.ts
+++ b/e2e/tests/ui-driven/src/login.spec.ts
@@ -37,7 +37,7 @@ test.describe("Login", () => {
       return response.url().includes("/graphql");
     });
 
-    const team = page.locator("h2", { hasText: context.team.name });
+    const team = page.locator("h3", { hasText: context.team.name });
     await expect(team).toBeVisible();
   });
 
@@ -50,7 +50,7 @@ test.describe("Login", () => {
     });
     await page.goto("/");
 
-    const teamLink = page.locator("h2").filter({ hasText: context.team.name });
+    const teamLink = page.locator("h3").filter({ hasText: context.team.name });
     await teamLink.waitFor(); // wait for this to be visible
 
     // drop graphql requests
@@ -67,7 +67,7 @@ test.describe("Login", () => {
       route.continue();
     });
     await expect(
-      page.locator("h1").filter({ hasText: "My services" }),
+      page.locator("h1").filter({ hasText: "Services" }),
     ).toBeVisible();
     await expect(page.getByText(toastText)).toBeHidden();
   });
diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
index d530c235f8..fc6ee62a4c 100644
--- a/editor.planx.uk/src/pages/Team.tsx
+++ b/editor.planx.uk/src/pages/Team.tsx
@@ -1,10 +1,11 @@
 import { gql } from "@apollo/client";
-import Add from "@mui/icons-material/Add";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import Edit from "@mui/icons-material/Edit";
 import Visibility from "@mui/icons-material/Visibility";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import ButtonBase from "@mui/material/ButtonBase";
+import Container from "@mui/material/Container";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -12,10 +13,11 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import orderBy from "lodash/orderBy";
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useNavigation } from "react-navi";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+import { borderedFocusStyle } from "theme";
+import Dashboard from "ui/editor/Dashboard";
 import { slugify } from "utils";
 
 import { client } from "../lib/graphql";
@@ -24,21 +26,11 @@ import { useStore } from "./FlowEditor/lib/store";
 import { formatLastEditMessage } from "./FlowEditor/utils";
 
 const Root = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.dark,
-  color: "#fff",
+  backgroundColor: theme.palette.background.default,
   width: "100%",
-  flex: 1,
-  justifyContent: "flex-start",
-  alignItems: "center",
-}));
-
-const Dashboard = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.dark,
-  color: "#fff",
-  width: "100%",
-  maxWidth: 600,
-  margin: "auto",
-  padding: theme.spacing(8, 0, 4, 0),
+  display: "flex",
+  alignItems: "flex-start",
+  flexGrow: 1,
 }));
 
 const DashboardList = styled("ul")(({ theme }) => ({
@@ -50,7 +42,13 @@ const DashboardList = styled("ul")(({ theme }) => ({
 const DashboardListItem = styled("li")(({ theme }) => ({
   listStyle: "none",
   position: "relative",
-  padding: theme.spacing(2.5, 2),
+  color: theme.palette.common.white,
+  margin: theme.spacing(1, 0),
+  background: theme.palette.text.primary,
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "stretch",
+  borderRadius: "2px",
 }));
 
 const DashboardLink = styled(Link)(({ theme }) => ({
@@ -59,21 +57,23 @@ const DashboardLink = styled(Link)(({ theme }) => ({
   textDecoration: "none",
   color: "currentColor",
   fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  marginBottom: theme.spacing(1.5),
-  marginTop: 0,
+  padding: theme.spacing(2),
+  margin: 0,
+  width: "100%",
+  "&:focus-within": {
+    ...borderedFocusStyle,
+  },
 }));
 
 const StyledSimpleMenu = styled(SimpleMenu)(({ theme }) => ({
-  position: "absolute",
-  top: theme.spacing(2),
-  right: theme.spacing(1),
+  display: "flex",
+  borderLeft: `1px solid ${theme.palette.border.main}`,
 }));
 
-const LinkSubText = styled(Box)(() => ({
-  color: "#aaa",
-  "& a": {
-    color: "#fff",
-  },
+const LinkSubText = styled(Box)(({ theme }) => ({
+  color: theme.palette.grey[400],
+  fontWeight: "normal",
+  paddingTop: "0.5em",
 }));
 
 const Confirm = ({
@@ -113,13 +113,12 @@ const Confirm = ({
 );
 
 const AddButtonRoot = styled(ButtonBase)(({ theme }) => ({
-  width: "100%",
-  padding: theme.spacing(4),
   fontSize: 20,
-  backgroundColor: "rgba(255,255,255,0.25)",
-  display: "block",
+  display: "flex",
+  alignItems: "center",
   textAlign: "left",
-  marginTop: theme.spacing(2),
+  color: theme.palette.primary.main,
+  fontWeight: FONT_WEIGHT_SEMI_BOLD,
 }));
 
 function AddButton({
@@ -131,7 +130,7 @@ function AddButton({
 }): FCReturn {
   return (
     <AddButtonRoot onClick={onClick}>
-      <Add sx={{ mr: 3, verticalAlign: "middle" }} /> {children}
+      <AddCircleOutlineIcon sx={{ mr: 1 }} /> {children}
     </AddButtonRoot>
   );
 }
@@ -191,17 +190,17 @@ const FlowItem: React.FC<FlowItemProps> = ({
         />
       )}
       <DashboardListItem>
-        <Box pr={4}>
-          <DashboardLink href={`./${flow.slug}`} prefetch={false}>
+        <DashboardLink href={`./${flow.slug}`} prefetch={false}>
+          <Typography variant="h4" component="h2">
             {flow.name}
-          </DashboardLink>
+          </Typography>
           <LinkSubText>
             {formatLastEditMessage(
               flow.operations[0].createdAt,
               flow.operations[0]?.actor,
             )}
           </LinkSubText>
-        </Box>
+        </DashboardLink>
         {useStore.getState().canUserEditTeam(teamSlug) && (
           <StyledSimpleMenu
             items={[
@@ -305,57 +304,67 @@ const Team: React.FC = () => {
   return (
     <Root>
       <Dashboard>
-        <Box
-          pl={2}
-          pb={2}
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }}
-        >
-          <Typography variant="h2" component="h1">
-            My services
-          </Typography>
-          {useStore.getState().canUserEditTeam(slug) ? (
-            <Edit />
-          ) : (
-            <Visibility />
-          )}
-        </Box>
-        {useStore.getState().canUserEditTeam(slug) && (
-          <AddButton
-            onClick={() => {
-              const newFlowName = prompt("Service name");
-              if (newFlowName) {
-                const newFlowSlug = slugify(newFlowName);
-                useStore
-                  .getState()
-                  .createFlow(teamId, newFlowSlug, newFlowName)
-                  .then((newId: string) => {
-                    navigation.navigate(`/${slug}/${newId}`);
-                  });
-              }
+        <Container maxWidth="formWrap">
+          <Box
+            pb={1}
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
             }}
           >
-            Add a new service
-          </AddButton>
-        )}
-        {flows && (
-          <DashboardList>
-            {flows.map((flow: any) => (
-              <FlowItem
-                flow={flow}
-                key={flow.slug}
-                teamId={teamId}
-                teamSlug={slug}
-                refreshFlows={() => {
-                  fetchFlows();
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Typography variant="h2" component="h1" pr={1}>
+                Services
+              </Typography>
+              {useStore.getState().canUserEditTeam(slug) ? (
+                <Edit />
+              ) : (
+                <Visibility />
+              )}
+            </Box>
+            {useStore.getState().canUserEditTeam(slug) && (
+              <AddButton
+                onClick={() => {
+                  const newFlowName = prompt("Service name");
+                  if (newFlowName) {
+                    const newFlowSlug = slugify(newFlowName);
+                    useStore
+                      .getState()
+                      .createFlow(teamId, newFlowSlug, newFlowName)
+                      .then((newId: string) => {
+                        navigation.navigate(`/${slug}/${newId}`);
+                      });
+                  }
                 }}
-              />
-            ))}
-          </DashboardList>
-        )}
+              >
+                Add a new service
+              </AddButton>
+            )}
+          </Box>
+          {flows && (
+            <DashboardList>
+              {flows.map((flow: any) => (
+                <FlowItem
+                  flow={flow}
+                  key={flow.slug}
+                  teamId={teamId}
+                  teamSlug={slug}
+                  refreshFlows={() => {
+                    fetchFlows();
+                  }}
+                />
+              ))}
+            </DashboardList>
+          )}
+        </Container>
       </Dashboard>
     </Root>
   );
diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx
index ea11e0d1b1..f8208dd2c9 100644
--- a/editor.planx.uk/src/pages/Teams.tsx
+++ b/editor.planx.uk/src/pages/Teams.tsx
@@ -1,71 +1,109 @@
-import Edit from "@mui/icons-material/Edit";
-import Visibility from "@mui/icons-material/Visibility";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
+import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { Team } from "@opensystemslab/planx-core/types";
 import React from "react";
 import { Link } from "react-navi";
+import { borderedFocusStyle } from "theme";
+import Dashboard from "ui/editor/Dashboard";
 
 import { useStore } from "./FlowEditor/lib/store";
 
+interface TeamTheme {
+  slug: string;
+  primaryColour: string;
+}
+
 interface Props {
   teams: Array<Team>;
+  teamTheme: Array<TeamTheme>;
 }
 
-const Root = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.dark,
-  color: "#fff",
+export const Root = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
   width: "100%",
-  flex: 1,
+  display: "flex",
+  alignItems: "flex-start",
+  flexGrow: 1,
+}));
+
+const StyledLink = styled(Link)(() => ({
+  textDecoration: "none",
+  "&:focus-within > div": {
+    ...borderedFocusStyle,
+  },
+}));
+
+const TeamCard = styled(Card)(({ theme }) => ({
+  display: "flex",
   justifyContent: "flex-start",
   alignItems: "center",
+  marginBottom: theme.spacing(2),
+  color: theme.palette.text.primary,
+  outline: `1px solid ${theme.palette.border.light}`,
+  outlineOffset: "-1px",
+  borderRadius: "1px",
 }));
 
-const Dashboard = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.dark,
-  color: "#fff",
-  width: "100%",
-  maxWidth: 600,
-  margin: "auto",
-  padding: theme.spacing(8, 0, 4, 0),
+const TeamColourBand = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignSelf: "stretch",
+  width: theme.spacing(1.5),
+  zIndex: 1,
 }));
 
-const StyledLink = styled(Link)(() => ({
-  textDecoration: "none",
-}));
+const Teams: React.FC<Props> = ({ teams, teamTheme }) => {
+  const canUserEditTeam = useStore.getState().canUserEditTeam;
+
+  const editableTeams: Team[] = [];
+  const viewOnlyTeams: Team[] = [];
 
-const Teams: React.FC<Props> = ({ teams }) => {
+  teams.forEach((team) =>
+    canUserEditTeam(team.slug)
+      ? editableTeams.push(team)
+      : viewOnlyTeams.push(team),
+  );
+
+  const renderTeams = (teamsToRender: Array<Team>) =>
+    teamsToRender.map((team) => {
+      return (
+        <StyledLink href={`/${team.slug}`} key={team.slug} prefetch={false}>
+          <TeamCard>
+            <TeamColourBand bgcolor={team.theme.primaryColour} />
+            <Typography p={2} variant="h3">
+              {team.name}
+            </Typography>
+          </TeamCard>
+        </StyledLink>
+      );
+    });
   return (
     <Root>
       <Dashboard>
-        <Box pl={2} pb={2}>
-          <Typography variant="h2" component="h1" gutterBottom>
+        <Container maxWidth="formWrap">
+          <Typography variant="h2" component="h1" mb={4}>
             Select a team
           </Typography>
-        </Box>
-        {teams.map(({ name, slug }) => (
-          <StyledLink href={`/${slug}`} key={slug} prefetch={false}>
-            <Box
-              mb={2.5}
-              px={2.5}
-              py={3}
-              mx={2}
-              component={Card}
-              style={{ display: "flex", justifyContent: "space-between" }}
-            >
-              <Typography variant="h4" component="h2">
-                {name}
+          {editableTeams.length > 0 && (
+            <>
+              <Typography variant="h3" component="h2" mb={2}>
+                My teams
+              </Typography>
+              {renderTeams(editableTeams)}
+            </>
+          )}
+
+          {viewOnlyTeams.length > 0 && (
+            <>
+              <Typography variant="h3" component="h2" mt={4} mb={2}>
+                Other teams (view only)
               </Typography>
-              {useStore.getState().canUserEditTeam(slug) ? (
-                <Edit />
-              ) : (
-                <Visibility />
-              )}
-            </Box>
-          </StyledLink>
-        ))}
+              {renderTeams(viewOnlyTeams)}
+            </>
+          )}
+        </Container>
       </Dashboard>
     </Root>
   );
diff --git a/editor.planx.uk/src/routes/authenticated.tsx b/editor.planx.uk/src/routes/authenticated.tsx
index 659b907d79..b6a4745a52 100644
--- a/editor.planx.uk/src/routes/authenticated.tsx
+++ b/editor.planx.uk/src/routes/authenticated.tsx
@@ -30,6 +30,10 @@ const editorRoutes = compose(
               id
               name
               slug
+              theme {
+                primaryColour: primary_colour
+                logo
+              }
             }
           }
         `,
@@ -39,7 +43,7 @@ const editorRoutes = compose(
 
       return {
         title: makeTitle("Teams"),
-        view: <Teams teams={data.teams} />,
+        view: <Teams teams={data.teams} teamTheme={data.teamThemes} />,
       };
     }),
 
diff --git a/editor.planx.uk/src/ui/editor/Dashboard.tsx b/editor.planx.uk/src/ui/editor/Dashboard.tsx
new file mode 100644
index 0000000000..a18472da46
--- /dev/null
+++ b/editor.planx.uk/src/ui/editor/Dashboard.tsx
@@ -0,0 +1,22 @@
+import Box from "@mui/material/Box";
+import { containerClasses } from "@mui/material/Container";
+import { styled } from "@mui/material/styles";
+import { HEADER_HEIGHT } from "components/Header";
+import React, { PropsWithChildren } from "react";
+
+const Root = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  display: "flex",
+  flexDirection: "row",
+  width: "100%",
+  minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
+  [`& > .${containerClasses.root}`]: {
+    paddingTop: theme.spacing(6),
+    paddingBottom: theme.spacing(6),
+  },
+}));
+
+export default function Dashboard(props: PropsWithChildren) {
+  return <Root>{props.children}</Root>;
+}