diff --git a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentPanel/DocumentTitle.js b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentPanel/DocumentTitle.js
index ea606eb92..e38e39352 100644
--- a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentPanel/DocumentTitle.js
+++ b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentPanel/DocumentTitle.js
@@ -1,7 +1,8 @@
 import _isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
+import _get from 'lodash/get';
 import React, { Component } from 'react';
-import { Header } from 'semantic-ui-react';
+import { Grid, Header, Label } from 'semantic-ui-react';
 import LiteratureTitle from '@modules/Literature/LiteratureTitle';
 
 export class DocumentTitle extends Component {
@@ -19,9 +20,26 @@ export class DocumentTitle extends Component {
 
   render() {
     const { metadata } = this.props;
+    const volume = _get(metadata, 'relations.multipart_monograph[0].volume');
+
     return (
       <>
-        {metadata.document_type}
+        <Grid columns={2}>
+          <Grid.Row>
+            <Grid.Column textAlign="left" only="tablet computer">
+              {metadata.document_type}
+            </Grid.Column>
+            <Grid.Column textAlign="right" only="tablet computer">
+              {volume && <Label>{'Volume ' + volume}</Label>}
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+        <Grid rows={2} textAlign="center">
+          <Grid.Row only="mobile">{metadata.document_type}</Grid.Row>
+          <Grid.Row only="mobile">
+            {volume && <Label>{'Volume ' + volume}</Label>}
+          </Grid.Row>
+        </Grid>
         <Header as="h2" className="document-title">
           <LiteratureTitle
             title={metadata.title}