diff --git a/src/views/Publication/Add.js b/src/views/Publication/Add.js
index dd7b98e..965307c 100644
--- a/src/views/Publication/Add.js
+++ b/src/views/Publication/Add.js
@@ -10,10 +10,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import TextField from '@mui/material/TextField';
@@ -33,6 +30,7 @@ import PaperFooter from '../../misc/PaperFooter';
 import ProcessControl from '../../misc/controls/Process';
 import SourceControl from '../../misc/controls/Source';
 import Services from './Services';
+import TabContent from './TabContent';
 import TabPanel from '../../misc/TabPanel';
 import TabsVerticalGrid from '../../misc/TabsVerticalGrid';
 
@@ -43,17 +41,6 @@ const useStyles = makeStyles((theme) => ({
 	gridContainer: {
 		marginTop: '0.5em',
 	},
-	serviceDescription: {
-		margin: '1em 0em 1em 0em',
-	},
-	serviceIcon: {
-		fontSize: '4rem!important',
-		maxHeight: 64,
-		marginTop: '-0.065em',
-	},
-	serviceName: {
-		marginTop: '-.2rem',
-	},
 	buttonGroup: {
 		marginTop: '0.5em',
 		marginBottom: '-0.5em',
@@ -261,7 +248,6 @@ export default function Add(props) {
 	let serviceList = [];
 
 	let ServiceControl = null;
-	let ServiceIcon = null;
 	let serviceSkills = null;
 
 	let service = {};
@@ -325,8 +311,6 @@ export default function Add(props) {
 		}
 
 		ServiceControl = service.component;
-		ServiceIcon = service.icon;
-
 		serviceSkills = helper.conflateServiceSkills(service.requires, $skills);
 	}
 
@@ -393,19 +377,8 @@ export default function Add(props) {
 									<Tab className="tab" label={<Trans>Encoding</Trans>} value="encoding" />
 								</Tabs>
 								<TabPanel value={$tab} index="general" className="panel">
-									<Grid container spacing={2}>
-										<Grid item xs={12}>
-											<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-												<ServiceIcon className={classes.serviceIcon} />
-												<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
-													<Typography variant="h1" className={classes.serviceName}>
-														{service.name}
-													</Typography>
-													<Typography>v{service.version}</Typography>
-												</Stack>
-											</Stack>
-										</Grid>
-										<Grid item xs={12} className={classes.serviceDescription}>
+									<TabContent service={service}>
+										<Grid item xs={12} sx={{ margin: '1em 0em 1em 0em' }}>
 											<Typography>{service.description}</Typography>
 										</Grid>
 										<Grid item xs={12}>
@@ -426,35 +399,10 @@ export default function Add(props) {
 												onChange={handleServiceChange}
 											/>
 										</Grid>
-										<Grid item xs={12}>
-											<Divider />
-										</Grid>
-										<Grid item xs={12}>
-											<Typography>
-												<Trans>Maintainer:</Trans>{' '}
-												<Link color="secondary" target="_blank" href={service.author.creator.link}>
-													{service.author.maintainer.name}
-												</Link>
-											</Typography>
-										</Grid>
-									</Grid>
+									</TabContent>
 								</TabPanel>
 								<TabPanel value={$tab} index="process" className="panel">
-									<Grid container spacing={2}>
-										<Grid item xs={12}>
-											<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-												<ServiceIcon className={classes.serviceIcon} />
-												<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
-													<Typography variant="h1" className={classes.serviceName}>
-														{service.name}
-													</Typography>
-													<Typography>v{service.version}</Typography>
-												</Stack>
-											</Stack>
-										</Grid>
-										<Grid item xs={12}>
-											<Divider />
-										</Grid>
+									<TabContent service={service}>
 										<Grid item xs={12}>
 											<Typography variant="h2">
 												<Trans>Process</Trans>
@@ -463,35 +411,10 @@ export default function Add(props) {
 										<Grid item xs={12}>
 											<ProcessControl settings={$settings.control.process} onChange={handleControlChange('process')} />
 										</Grid>
-										<Grid item xs={12}>
-											<Divider />
-										</Grid>
-										<Grid item xs={12}>
-											<Typography>
-												<Trans>Maintainer:</Trans>{' '}
-												<Link color="secondary" target="_blank" href={service.author.creator.link}>
-													{service.author.maintainer.name}
-												</Link>
-											</Typography>
-										</Grid>
-									</Grid>
+									</TabContent>
 								</TabPanel>
 								<TabPanel value={$tab} index="source" className="panel">
-									<Grid container spacing={2}>
-										<Grid item xs={12}>
-											<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-												<ServiceIcon className={classes.serviceIcon} />
-												<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
-													<Typography variant="h1" className={classes.serviceName}>
-														{service.name}
-													</Typography>
-													<Typography>v{service.version}</Typography>
-												</Stack>
-											</Stack>
-										</Grid>
-										<Grid item xs={12}>
-											<Divider />
-										</Grid>
+									<TabContent service={service}>
 										<Grid item xs={12}>
 											<Typography variant="h2">
 												<Trans>Source</Trans>
@@ -504,35 +427,10 @@ export default function Add(props) {
 												onChange={handleControlChange('source')}
 											/>
 										</Grid>
-										<Grid item xs={12}>
-											<Divider />
-										</Grid>
-										<Grid item xs={12}>
-											<Typography>
-												<Trans>Maintainer:</Trans>{' '}
-												<Link color="secondary" target="_blank" href={service.author.creator.link}>
-													{service.author.maintainer.name}
-												</Link>
-											</Typography>
-										</Grid>
-									</Grid>
+									</TabContent>
 								</TabPanel>
 								<TabPanel value={$tab} index="encoding" className="panel">
-									<Grid container spacing={2}>
-										<Grid item xs={12}>
-											<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-												<ServiceIcon className={classes.serviceIcon} />
-												<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
-													<Typography variant="h1" className={classes.serviceName}>
-														{service.name}
-													</Typography>
-													<Typography>v{service.version}</Typography>
-												</Stack>
-											</Stack>
-										</Grid>
-										<Grid item xs={12}>
-											<Divider />
-										</Grid>
+									<TabContent service={service}>
 										<Grid item xs={12}>
 											<Typography variant="h2">
 												<Trans>Encoding</Trans>
@@ -575,18 +473,7 @@ export default function Add(props) {
 												onChange={handleProcessing('audio')}
 											/>
 										</Grid>
-										<Grid item xs={12}>
-											<Divider />
-										</Grid>
-										<Grid item xs={12}>
-											<Typography>
-												<Trans>Maintainer:</Trans>{' '}
-												<Link color="secondary" target="_blank" href={service.author.creator.link}>
-													{service.author.maintainer.name}
-												</Link>
-											</Typography>
-										</Grid>
-									</Grid>
+									</TabContent>
 								</TabPanel>
 							</TabsVerticalGrid>
 						</Grid>
diff --git a/src/views/Publication/Edit.js b/src/views/Publication/Edit.js
index 80e2837..3bbf53f 100644
--- a/src/views/Publication/Edit.js
+++ b/src/views/Publication/Edit.js
@@ -8,10 +8,8 @@ import makeStyles from '@mui/styles/makeStyles';
 import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import TextField from '@mui/material/TextField';
@@ -34,6 +32,7 @@ import ProcessControl from '../../misc/controls/Process';
 import ProcessModal from '../../misc/modals/Process';
 import Services from './Services';
 import SourceControl from '../../misc/controls/Source';
+import TabContent from './TabContent';
 import TabPanel from '../../misc/TabPanel';
 import TabsVerticalGrid from '../../misc/TabsVerticalGrid';
 
@@ -46,17 +45,6 @@ const useStyles = makeStyles((theme) => ({
 		marginLeft: 10,
 		wordWrap: 'anywhere',
 	},
-	serviceDescription: {
-		margin: '1em 0em 1em 0em',
-	},
-	serviceIcon: {
-		fontSize: '4rem!important',
-		maxHeight: 64,
-		marginTop: '-0.065em',
-	},
-	serviceName: {
-		marginTop: '-.2rem',
-	},
 }));
 
 export default function Edit(props) {
@@ -384,7 +372,6 @@ export default function Edit(props) {
 	}
 
 	const ServiceControl = $service.component;
-	const ServiceIcon = $service.icon;
 
 	const title = $settings.name.length === 0 ? $service.name : $settings.name;
 
@@ -409,19 +396,8 @@ export default function Edit(props) {
 							<Tab className="tab" label={<Trans>Encoding</Trans>} value="encoding" />
 						</Tabs>
 						<TabPanel value={$tab} index="general" className="panel">
-							<Grid container spacing={2}>
-								<Grid item xs={12}>
-									<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-										<ServiceIcon className={classes.serviceIcon} />
-										<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
-											<Typography variant="h1" className={classes.serviceName}>
-												{$service.name}
-											</Typography>
-											<Typography>v{$service.version}</Typography>
-										</Stack>
-									</Stack>
-								</Grid>
-								<Grid item xs={12} className={classes.serviceDescription}>
+							<TabContent service={$service}>
+								<Grid item xs={12} sx={{ margin: '1em 0em 1em 0em' }}>
 									<Typography>{$service.description}</Typography>
 								</Grid>
 								<Grid item xs={12}>
@@ -436,35 +412,10 @@ export default function Edit(props) {
 								<Grid item xs={12}>
 									<ServiceControl settings={$settings.settings} skills={$serviceSkills} metadata={$metadata} onChange={handleServiceChange} />
 								</Grid>
-								<Grid item xs={12}>
-									<Divider />
-								</Grid>
-								<Grid item xs={12}>
-									<Typography>
-										<Trans>Maintainer:</Trans>{' '}
-										<Link color="secondary" target="_blank" href={$service.author.maintainer.link}>
-											{$service.author.maintainer.name}
-										</Link>
-									</Typography>
-								</Grid>
-							</Grid>
+							</TabContent>
 						</TabPanel>
 						<TabPanel value={$tab} index="process" className="panel">
-							<Grid container spacing={2}>
-								<Grid item xs={12}>
-									<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-										<ServiceIcon className={classes.serviceIcon} />
-										<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
-											<Typography variant="h1" className={classes.serviceName}>
-												{$service.name}
-											</Typography>
-											<Typography>v{$service.version}</Typography>
-										</Stack>
-									</Stack>
-								</Grid>
-								<Grid item xs={12}>
-									<Divider />
-								</Grid>
+							<TabContent service={$service}>
 								<Grid item xs={12}>
 									<Typography variant="h2">
 										<Trans>Process</Trans>
@@ -501,35 +452,10 @@ export default function Edit(props) {
 										)}
 									</Grid>
 								</Grid>
-								<Grid item xs={12}>
-									<Divider />
-								</Grid>
-								<Grid item xs={12}>
-									<Typography>
-										<Trans>Maintainer:</Trans>{' '}
-										<Link color="secondary" target="_blank" href={$service.author.maintainer.link}>
-											{$service.author.maintainer.name}
-										</Link>
-									</Typography>
-								</Grid>
-							</Grid>
+							</TabContent>
 						</TabPanel>
 						<TabPanel value={$tab} index="source" className="panel">
-							<Grid container spacing={2}>
-								<Grid item xs={12}>
-									<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-										<ServiceIcon className={classes.serviceIcon} />
-										<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
-											<Typography variant="h1" className={classes.serviceName}>
-												{$service.name}
-											</Typography>
-											<Typography>v{$service.version}</Typography>
-										</Stack>
-									</Stack>
-								</Grid>
-								<Grid item xs={12}>
-									<Divider />
-								</Grid>
+							<TabContent service={$service}>
 								<Grid item xs={12}>
 									<Typography variant="h2">
 										<Trans>Source</Trans>
@@ -538,35 +464,10 @@ export default function Edit(props) {
 								<Grid item xs={12}>
 									<SourceControl settings={$settings.control.source} sources={$localSources} onChange={handleControlChange('source')} />
 								</Grid>
-								<Grid item xs={12}>
-									<Divider />
-								</Grid>
-								<Grid item xs={12}>
-									<Typography>
-										<Trans>Maintainer:</Trans>{' '}
-										<Link color="secondary" target="_blank" href={$service.author.maintainer.link}>
-											{$service.author.maintainer.name}
-										</Link>
-									</Typography>
-								</Grid>
-							</Grid>
+							</TabContent>
 						</TabPanel>
 						<TabPanel value={$tab} index="encoding" className="panel">
-							<Grid container spacing={2}>
-								<Grid item xs={12}>
-									<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-										<ServiceIcon className={classes.serviceIcon} />
-										<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
-											<Typography variant="h1" className={classes.serviceName}>
-												{$service.name}
-											</Typography>
-											<Typography>v{$service.version}</Typography>
-										</Stack>
-									</Stack>
-								</Grid>
-								<Grid item xs={12}>
-									<Divider />
-								</Grid>
+							<TabContent service={$service}>
 								<Grid item xs={12}>
 									<Typography variant="h2">
 										<Trans>Encoding</Trans>
@@ -611,18 +512,7 @@ export default function Edit(props) {
 										onChange={handleEncoding('audio')}
 									/>
 								</Grid>
-								<Grid item xs={12}>
-									<Divider />
-								</Grid>
-								<Grid item xs={12}>
-									<Typography>
-										<Trans>Maintainer:</Trans>{' '}
-										<Link color="secondary" target="_blank" href={$service.author.maintainer.link}>
-											{$service.author.maintainer.name}
-										</Link>
-									</Typography>
-								</Grid>
-							</Grid>
+							</TabContent>
 						</TabPanel>
 					</TabsVerticalGrid>
 				</Grid>
diff --git a/src/views/Publication/TabContent.js b/src/views/Publication/TabContent.js
new file mode 100644
index 0000000..721d02d
--- /dev/null
+++ b/src/views/Publication/TabContent.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Trans } from '@lingui/macro';
+
+import makeStyles from '@mui/styles/makeStyles';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+const useStyles = makeStyles((theme) => ({
+	serviceIcon: {
+		fontSize: '4rem!important',
+		maxHeight: 64,
+		marginTop: '-0.065em',
+	},
+	serviceName: {
+		marginTop: '-.2rem',
+	},
+}));
+
+export default function TabContent(props) {
+	const classes = useStyles();
+
+	return (
+		<Grid container spacing={2}>
+			<Grid item xs={12}>
+				<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
+					<props.service.icon className={classes.serviceIcon} />
+					<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
+						<Typography variant="h1" className={classes.serviceName}>
+							{props.service.name}
+						</Typography>
+						<Typography>v{props.service.version}</Typography>
+					</Stack>
+				</Stack>
+			</Grid>
+			<Grid item xs={12}>
+				<Divider />
+			</Grid>
+			{props.children}
+			<Grid item xs={12}>
+				<Divider />
+			</Grid>
+			<Grid item xs={12}>
+				<Typography>
+					<Trans>Maintainer:</Trans>{' '}
+					<Link color="secondary" target="_blank" href={props.service.author.creator.link}>
+						{props.service.author.maintainer.name}
+					</Link>
+				</Typography>
+			</Grid>
+		</Grid>
+	);
+}
+
+TabContent.defaultProps = {
+	service: null,
+};
+
+TabContent.propTypes = {
+	service: PropTypes.object.isRequired,
+};