diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
index a604c85d52..6e14019033 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
@@ -146,7 +146,7 @@ const OptionEditor: React.FC<{
 
 const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   return (
-    <ModalSectionContent title="Options">
+    <ModalSectionContent subtitle="Options">
       {formik.values.groupedOptions ? (
         <Box>
           {formik.values.groupedOptions.map(
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index 96690a4f75..c38d357389 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -44,7 +44,7 @@ const OptionEditor: React.FC<{
       {props.value.id && (
         <input type="hidden" value={props.value.id} readOnly />
       )}
-      <InputRowItem width="50%">
+      <InputRowItem width="100%">
         <Input
           // required
           format="bold"
@@ -86,6 +86,7 @@ const OptionEditor: React.FC<{
             },
           });
         }}
+        sx={{ width: "160px", maxWidth: "160px" }}
       />
     </InputRow>
     <InputRow>
@@ -210,7 +211,7 @@ export const Question: React.FC<Props> = (props) => {
           </InputGroup>
         </ModalSectionContent>
 
-        <ModalSectionContent title="Options">
+        <ModalSectionContent subtitle="Options">
           <ListManager
             values={formik.values.options}
             onChange={(newOptions) => {
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
index 2135a8cc2d..abdf01e204 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
@@ -58,7 +58,9 @@ const DesignSettings: React.FC = () => {
         <InputGroup flowSpacing>
           <InputLegend>Logo</InputLegend>
           <InputCaption>
-            Set the logo to be used in the header of the service.
+            Set the logo to be used in the header of the service. The logo
+            should contrast with a dark background colour and have a transparent
+            background.
           </InputCaption>
           <Link variant="body2" href="https://www.planx.uk">
             See our guide for logos
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index b123ff89db..24511d0089 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -4,8 +4,10 @@ import Switch, { SwitchProps } from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import { useFormik } from "formik";
 import React from "react";
+import EditorRow from "ui/EditorRow";
 import Input, { Props as InputProps } from "ui/Input";
 import InputGroup from "ui/InputGroup";
+import InputLegend from "ui/InputLegend";
 import InputRow from "ui/InputRow";
 import InputRowItem from "ui/InputRowItem";
 import RichTextInput from "ui/RichTextInput";
@@ -29,8 +31,8 @@ const TextInput: React.FC<{
   contentInputProps,
 }) => {
   return (
-    <Box mb={2} width="100%">
-      <Box my={2} display="flex" alignItems="center">
+    <Box width="100%">
+      <Box mb={2} display="flex" alignItems="center">
         <Switch {...switchProps} color="primary" />
         <Typography variant="h4" component="h5">
           {title}
@@ -98,15 +100,15 @@ const ServiceSettings: React.FC = () => {
 
   return (
     <form onSubmit={formik.handleSubmit}>
-      <Box pb={3} borderBottom={1}>
+      <EditorRow>
         <Typography variant="h2" component="h3" gutterBottom>
           Elements
         </Typography>
         <Typography variant="body1">
           Manage the features that users will be able to see
         </Typography>
-      </Box>
-      <Box borderBottom={1} pb={3}>
+      </EditorRow>
+      <EditorRow background>
         <TextInput
           title="Legal Disclaimer"
           description="Displayed before a user submits their application"
@@ -126,61 +128,61 @@ const ServiceSettings: React.FC = () => {
             onChange: formik.handleChange,
           }}
         />
-      </Box>
-      <Box pt={2}>
-        <Typography variant="h3" component="h4">
-          <strong>Footer Links</strong>
-        </Typography>
-        <InputGroup>
-          <TextInput
-            title="Help Page"
-            richText
-            description="A place to communicate FAQs, useful tips, or contact information"
-            switchProps={{
-              name: "elements.help.show",
-              checked: formik.values.elements?.help?.show,
-              onChange: formik.handleChange,
-            }}
-            headingInputProps={{
-              name: "elements.help.heading",
-              value: formik.values.elements?.help?.heading,
-              onChange: formik.handleChange,
-            }}
-            contentInputProps={{
-              name: "elements.help.content",
-              value: formik.values.elements?.help?.content,
-              onChange: formik.handleChange,
-            }}
-          />
-
-          <TextInput
-            title="Privacy Page"
-            richText
-            description="Your privacy policy"
-            switchProps={{
-              name: "elements.privacy.show",
-              checked: formik.values.elements?.privacy?.show,
-              onChange: formik.handleChange,
-            }}
-            headingInputProps={{
-              name: "elements.privacy.heading",
-              value: formik.values.elements?.privacy?.heading,
-              onChange: formik.handleChange,
-            }}
-            contentInputProps={{
-              name: "elements.privacy.content",
-              value: formik.values.elements?.privacy?.content,
-              onChange: formik.handleChange,
-            }}
-          />
+      </EditorRow>
+      <EditorRow background>
+        <InputGroup flowSpacing>
+          <InputLegend>Footer Links</InputLegend>
+          <InputRow>
+            <TextInput
+              title="Help Page"
+              richText
+              description="A place to communicate FAQs, useful tips, or contact information"
+              switchProps={{
+                name: "elements.help.show",
+                checked: formik.values.elements?.help?.show,
+                onChange: formik.handleChange,
+              }}
+              headingInputProps={{
+                name: "elements.help.heading",
+                value: formik.values.elements?.help?.heading,
+                onChange: formik.handleChange,
+              }}
+              contentInputProps={{
+                name: "elements.help.content",
+                value: formik.values.elements?.help?.content,
+                onChange: formik.handleChange,
+              }}
+            />
+          </InputRow>
+          <InputRow>
+            <TextInput
+              title="Privacy Page"
+              richText
+              description="Your privacy policy"
+              switchProps={{
+                name: "elements.privacy.show",
+                checked: formik.values.elements?.privacy?.show,
+                onChange: formik.handleChange,
+              }}
+              headingInputProps={{
+                name: "elements.privacy.heading",
+                value: formik.values.elements?.privacy?.heading,
+                onChange: formik.handleChange,
+              }}
+              contentInputProps={{
+                name: "elements.privacy.content",
+                value: formik.values.elements?.privacy?.content,
+                onChange: formik.handleChange,
+              }}
+            />
+          </InputRow>
         </InputGroup>
-
-        <Box py={2} justifyContent="flex-end" mb={4}>
-          <Button type="submit" variant="contained" color="primary">
-            Save
-          </Button>
-        </Box>
-      </Box>
+      </EditorRow>
+      <EditorRow>
+        <Button type="submit" variant="contained" color="primary">
+          Update elements
+        </Button>
+      </EditorRow>
     </form>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx
index 824685d226..bc0f708dee 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx
@@ -56,10 +56,11 @@ interface LinkTabProps {
   href?: string;
 }
 
-const StyledTab = styled(Tab)(() => ({
+const StyledTab = styled(Tab)(({ theme }) => ({
   position: "relative",
   zIndex: 1,
   textTransform: "none",
+  background: theme.palette.background.default,
 })) as typeof Tab;
 
 function LinkTab(props: LinkTabProps) {
@@ -84,16 +85,16 @@ const classes = {
   tabIndicator: `${PREFIX}-tabIndicator`,
 };
 
-const Root = styled(Box)(() => ({
+const Root = styled(Box)(({ theme }) => ({
   flexGrow: 1,
-  backgroundColor: "#f2f2f2",
+  backgroundColor: theme.palette.background.default,
   position: "absolute",
   top: HEADER_HEIGHT,
   left: 0,
   right: 0,
   minHeight: `calc(100% - ${HEADER_HEIGHT}px)`,
   [`& .${classes.tabs}`]: {
-    backgroundColor: "#ddd",
+    backgroundColor: theme.palette.border.main,
   },
   [`& .${classes.tabIndicator}`]: {
     height: "100%",
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
index 9506116602..b6f0a0b063 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
@@ -21,23 +21,27 @@ import { useStore } from "../../lib/store";
 const StyledDialog = styled(Dialog)(({ theme }) => ({
   // Target all modal sections (the direct child is the backdrop, hence the double child selector)
   "& > * > *": {
-    backgroundColor: theme.palette.grey[100],
+    backgroundColor: theme.palette.background.paper,
   },
 }));
 
 const CloseButton = styled(IconButton)(({ theme }) => ({
-  float: "right",
-  margin: 0,
-  padding: 0,
+  margin: "0 0 0 auto",
+  padding: theme.spacing(1),
   color: theme.palette.grey[600],
 }));
 
+const TypeSelect = styled("select")(() => ({
+  fontSize: "1em",
+  padding: "0.25em",
+}));
+
 const NodeTypeSelect: React.FC<{
   value: string;
   onChange: (newValue: string) => void;
 }> = (props) => {
   return (
-    <select
+    <TypeSelect
       value={fromSlug(props.value)}
       onChange={(ev) => {
         props.onChange(ev.target.value);
@@ -85,7 +89,7 @@ const NodeTypeSelect: React.FC<{
       <optgroup label="Outputs">
         <option value={TYPES.Send}>Send</option>
       </optgroup>
-    </select>
+    </TypeSelect>
   );
 };
 
@@ -120,7 +124,14 @@ const FormModal: React.FC<{
       disableScrollLock
       onClose={handleClose}
     >
-      <DialogTitle>
+      <DialogTitle
+        sx={{
+          py: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
         {!handleDelete && (
           <NodeTypeSelect
             value={type}
diff --git a/editor.planx.uk/src/ui/ColorPicker.tsx b/editor.planx.uk/src/ui/ColorPicker.tsx
index add018158d..729f0d3f9f 100644
--- a/editor.planx.uk/src/ui/ColorPicker.tsx
+++ b/editor.planx.uk/src/ui/ColorPicker.tsx
@@ -65,9 +65,10 @@ const StyledButtonBase = styled(ButtonBase, {
   display: "flex",
   alignItems: "center",
   textAlign: "left",
-  padding: theme.spacing(1, 2),
+  padding: theme.spacing(1),
   whiteSpace: "nowrap",
   backgroundColor: theme.palette.common.white,
+  border: `1px solid ${theme.palette.border.light}`,
   ...(show && {
     color: theme.palette.primary.dark,
     "& .swatch": {
diff --git a/editor.planx.uk/src/ui/EditorRow.tsx b/editor.planx.uk/src/ui/EditorRow.tsx
index a1c1a7037b..63dc188bd1 100644
--- a/editor.planx.uk/src/ui/EditorRow.tsx
+++ b/editor.planx.uk/src/ui/EditorRow.tsx
@@ -12,7 +12,7 @@ const Root = styled(Box, {
 })<RootProps>(({ background, theme }) => ({
   display: "block",
   width: "100%",
-  padding: theme.spacing(2.5),
+  padding: theme.spacing(2.5, 0),
   "&:first-of-type": {
     paddingTop: 0,
   },
@@ -20,10 +20,10 @@ const Root = styled(Box, {
     ...contentFlowSpacing(theme),
   },
   ...(background && {
-    background: theme.palette.common.white,
+    background: theme.palette.background.paper,
     marginTop: theme.spacing(2),
-    border: `1px solid #e5e9f2`,
-    filter: `drop-shadow(rgba(0, 0, 0, 0.1) 0px 1px 0px)`,
+    padding: theme.spacing(2.5),
+    border: `1px solid ${theme.palette.border.light}`,
   }),
 }));
 
diff --git a/editor.planx.uk/src/ui/ImgInput.tsx b/editor.planx.uk/src/ui/ImgInput.tsx
index 5cd4a37160..17104b37b7 100644
--- a/editor.planx.uk/src/ui/ImgInput.tsx
+++ b/editor.planx.uk/src/ui/ImgInput.tsx
@@ -12,16 +12,17 @@ import PublicFileUploadButton from "./PublicFileUploadButton";
 
 const ImageUploadContainer = styled(Box)(() => ({
   height: 50,
-  width: 50,
   position: "relative",
+  flexGrow: 0,
+  display: "flex",
+  flexDirection: "row-reverse",
+  alignItems: "center",
 }));
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  position: "absolute",
   backgroundColor: "rgba(0, 0, 0, 0.5)",
   color: theme.palette.common.white,
-  top: 0,
-  right: 0,
+  marginLeft: theme.spacing(0.5),
 }));
 
 /** Uploads an image and returns corresponding URL */
diff --git a/editor.planx.uk/src/ui/Input.tsx b/editor.planx.uk/src/ui/Input.tsx
index 263670c532..a18eccd75d 100644
--- a/editor.planx.uk/src/ui/Input.tsx
+++ b/editor.planx.uk/src/ui/Input.tsx
@@ -37,26 +37,36 @@ const StyledInputBase = styled(InputBase, {
   shouldForwardProp: (prop) =>
     !["format", "bordered"].includes(prop.toString()),
 })<StyledInputBase>(({ theme, format, bordered }) => ({
-  backgroundColor: "#fff",
+  backgroundColor: theme.palette.common.white,
   // Maintain 16px minimum input size to prevent zoom on iOS
   fontSize: "1rem",
   width: "100%",
   padding: theme.spacing(0, 1.5),
   height: 50,
+  border: `1px solid ${theme.palette.border.light}`,
   "& input": {
     fontWeight: "inherit",
   },
+  "& ::placeholder": {
+    color: theme.palette.text.secondary,
+    opacity: "0.5",
+  },
+  "&:focus-within": {
+    border: `1px solid ${theme.palette.border.input}`,
+    boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.input}`,
+    outline: `3px solid ${theme.palette.action.focus}`,
+  },
   ...(bordered && {
     border: `2px solid ${theme.palette.text.primary}`,
   }),
   ...(format === "data" && {
-    backgroundColor: "#fafafa",
+    backgroundColor: theme.palette.common.white,
   }),
   ...(format === "bold" && {
     fontWeight: FONT_WEIGHT_SEMI_BOLD,
   }),
   ...(format === "large" && {
-    backgroundColor: "#fff",
+    backgroundColor: theme.palette.common.white,
     height: 50,
     fontSize: 25,
     width: "100%",
diff --git a/editor.planx.uk/src/ui/InputGroup.tsx b/editor.planx.uk/src/ui/InputGroup.tsx
index d06d94ff63..466d0baa93 100644
--- a/editor.planx.uk/src/ui/InputGroup.tsx
+++ b/editor.planx.uk/src/ui/InputGroup.tsx
@@ -3,6 +3,7 @@ import DragHandle from "@mui/icons-material/DragHandle";
 import Box, { BoxProps } from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import React, { PropsWithChildren, useRef } from "react";
 import { useDrag, useDrop } from "react-dnd";
 
@@ -42,10 +43,10 @@ const Root = styled("fieldset", {
   }),
 }));
 
-const Label = styled("legend")(({ theme }) => ({
-  fontSize: 15,
-  padding: theme.spacing(1.5, 0),
-}));
+const Label = styled(Typography)(({ theme }) => ({
+  display: "block",
+  padding: theme.spacing(0.75, 0),
+})) as typeof Typography;
 
 const Drag = styled(Box)(({ theme }) => ({
   position: "absolute",
@@ -183,7 +184,11 @@ export default function InputGroup({
 
   return (
     <Root ref={ref} className="inputGroup" flowSpacing={flowSpacing}>
-      {label && <Label>{label}</Label>}
+      {label && (
+        <Label variant="subtitle2" component="label">
+          {label}
+        </Label>
+      )}
       <Content
         deletable={deletable}
         draggable={draggable}
diff --git a/editor.planx.uk/src/ui/InputRow.tsx b/editor.planx.uk/src/ui/InputRow.tsx
index 19c0529fd8..9f4c515dff 100644
--- a/editor.planx.uk/src/ui/InputRow.tsx
+++ b/editor.planx.uk/src/ui/InputRow.tsx
@@ -8,12 +8,12 @@ const Root = styled(Box, {
   display: "flex",
   width: "100%",
   "&:not(:last-child)": {
-    marginBottom: 2,
+    marginBottom: 5,
   },
   "& > *": {
     flexGrow: 1,
     marginLeft: 1,
-    marginRight: 1,
+    marginRight: 5,
     "&:first-child": {
       marginLeft: 0,
     },
diff --git a/editor.planx.uk/src/ui/ModalSection.tsx b/editor.planx.uk/src/ui/ModalSection.tsx
index 2160425fab..506f12f7a5 100644
--- a/editor.planx.uk/src/ui/ModalSection.tsx
+++ b/editor.planx.uk/src/ui/ModalSection.tsx
@@ -3,9 +3,9 @@ import { styled } from "@mui/material/styles";
 import React, { PropsWithChildren } from "react";
 
 const Root = styled(Box)(({ theme }) => ({
-  paddingBottom: theme.spacing(3),
+  padding: theme.spacing(2, 0),
   "& + .modalSection": {
-    borderTop: "0.5px solid #bbb",
+    borderTop: `1px solid ${theme.palette.border.main}`,
   },
 }));
 
diff --git a/editor.planx.uk/src/ui/ModalSectionContent.tsx b/editor.planx.uk/src/ui/ModalSectionContent.tsx
index 7498525466..f8739275ab 100644
--- a/editor.planx.uk/src/ui/ModalSectionContent.tsx
+++ b/editor.planx.uk/src/ui/ModalSectionContent.tsx
@@ -1,11 +1,11 @@
-import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import React from "react";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 interface Props {
   title?: string;
+  subtitle?: string;
   children?: JSX.Element[] | JSX.Element;
   author?: string;
   Icon?: any;
@@ -15,7 +15,7 @@ const SectionContentGrid = styled(Grid)(({ theme }) => ({
   position: "relative",
   paddingTop: theme.spacing(2),
   paddingBottom: theme.spacing(2),
-  wrap: "no-wrap",
+  flexWrap: "nowrap",
 }));
 
 const LeftGutter = styled(Grid)(({ theme }) => ({
@@ -28,12 +28,16 @@ const SectionContent = styled(Grid)(({ theme }) => ({
   paddingRight: theme.spacing(6),
 }));
 
-const Title = styled(Box)(({ theme }) => ({
-  opacity: 0.75,
-  fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  fontSize: 18,
+const Title = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
   paddingBottom: theme.spacing(2),
-}));
+})) as typeof Typography;
+
+const Subtitle = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  paddingBottom: theme.spacing(2),
+  fontWeight: 600,
+})) as typeof Typography;
 
 const Author = styled("span")(({ theme }) => ({
   fontWeight: 400,
@@ -42,6 +46,7 @@ const Author = styled("span")(({ theme }) => ({
 
 export default function ModalSectionContent({
   title,
+  subtitle,
   children,
   author,
   Icon,
@@ -51,11 +56,17 @@ export default function ModalSectionContent({
       <LeftGutter item>{Icon && <Icon />}</LeftGutter>
       <SectionContent item>
         {title && (
-          <Title>
+          <Title variant="h3">
             {title}
             {author && <Author>by {author}</Author>}
           </Title>
         )}
+        {subtitle && (
+          <Subtitle variant="subtitle1">
+            {subtitle}
+            {author && <Author>by {author}</Author>}
+          </Subtitle>
+        )}
         {children}
       </SectionContent>
     </SectionContentGrid>
diff --git a/editor.planx.uk/src/ui/ModalSubtitle.tsx b/editor.planx.uk/src/ui/ModalSubtitle.tsx
index e7f5a0f1be..739bb6a3f3 100644
--- a/editor.planx.uk/src/ui/ModalSubtitle.tsx
+++ b/editor.planx.uk/src/ui/ModalSubtitle.tsx
@@ -2,7 +2,6 @@ import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React from "react";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 interface Props {
   title: string;
@@ -10,17 +9,15 @@ interface Props {
 
 const Root = styled(Box)(() => ({
   display: "flex",
-  height: 50,
   alignItems: "center",
 }));
 
-const StyledTypography = styled(Typography)(() => ({
-  fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  opacity: 0.75,
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  padding: theme.spacing(1.15, 0, 0.75),
 }));
 
 export const ModalSubtitle: React.FC<Props> = ({ title }) => (
   <Root sx={{ display: "flex" }}>
-    <StyledTypography variant="body2">{title}</StyledTypography>
+    <StyledTypography variant="subtitle2">{title}</StyledTypography>
   </Root>
 );
diff --git a/editor.planx.uk/src/ui/PublicFileUploadButton.tsx b/editor.planx.uk/src/ui/PublicFileUploadButton.tsx
index 7b8d8e2ff6..41cf283d4d 100644
--- a/editor.planx.uk/src/ui/PublicFileUploadButton.tsx
+++ b/editor.planx.uk/src/ui/PublicFileUploadButton.tsx
@@ -26,8 +26,10 @@ const Root = styled(ButtonBase, {
   borderRadius: 0,
   height: 50,
   width: 50,
-  backgroundColor: "#fff",
-  color: theme.palette.primary.main,
+  flexGrow: 0,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.primary.dark,
+  border: `1px solid ${theme.palette.border.light}`,
   ...(isDragActive && {
     border: `2px dashed ${theme.palette.primary.dark}`,
   }),
diff --git a/editor.planx.uk/src/ui/RichTextInput.css b/editor.planx.uk/src/ui/RichTextInput.css
index 903872fb5b..6127824065 100644
--- a/editor.planx.uk/src/ui/RichTextInput.css
+++ b/editor.planx.uk/src/ui/RichTextInput.css
@@ -1,7 +1,11 @@
 .ProseMirror {
-  padding: 15px;
+  padding: 12px 15px;
   background-color: #fff;
   min-height: 50px;
+  border: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .ProseMirror > * {
@@ -13,13 +17,20 @@
 }
 
 .ProseMirror p.is-editor-empty:first-child::before {
-  color: #adb5bd;
+  color: #505a5f;
+  opacity: 0.5;
   content: attr(data-placeholder);
   float: left;
   height: 0;
   pointer-events: none;
 }
 
+.ProseMirror.ProseMirror-focused {
+  border: 1px solid #000;
+  box-shadow: inset 0px 0px 0px 1px #000;
+  outline: 3px solid #ffdd00;
+}
+
 .passport {
   background-color: #f2f2f2;
   color: #000661;