diff --git a/webapp/src/main/resources/properties/de.properties b/webapp/src/main/resources/properties/de.properties
index c8df8f041c..c1ac8947b4 100644
--- a/webapp/src/main/resources/properties/de.properties
+++ b/webapp/src/main/resources/properties/de.properties
@@ -216,6 +216,13 @@ search.result.empty=Es gibt keine Ergebnisse. Aktualisieren Sie Ihre Parametersu
 # Message displayed when the user has not selected repository and locales
 search.result.selectRepoAndLocale=Wählen Sie mindestens ein Speicher und Locale aus bevor Sie suchen können.
 
+search.viewMode.title=Ansichtsmodus: {mode}
+
+search.viewMode.FULL=Voll
+search.viewMode.REDUCED=Reduziert
+search.viewMode.STANDARD=Standard
+search.viewMode.COMPACT=Kompakt
+
 # Label used in the header loggedInUser dropdown to show user's profile
 header.loggedInUser.profile=Mein Profil
 
@@ -336,6 +343,9 @@ textUnit.saveVirtualAssetTextUnit.failed=Couldn't not set translate attribute, c
 # Confirmation message
 textUnit.cancel.confirmation=Sind Sie sicher, dass Sie die Bearbeitung abbrechen möchten? Sie werden ihre Änderungen verlieren.
 
+textUnit.tag.repo=repo
+textUnit.tag.asset=asset
+
 # Label displayed on the repositories dropdown in the workbench
 search.repository.btn.text={numberOfSelectedRepositories, plural, =0{Repositories} =1{1 repository} other{# repositories}}
 
diff --git a/webapp/src/main/resources/properties/en.properties b/webapp/src/main/resources/properties/en.properties
index eb915a9693..85bde621a8 100644
--- a/webapp/src/main/resources/properties/en.properties
+++ b/webapp/src/main/resources/properties/en.properties
@@ -225,6 +225,13 @@ search.result.empty=There are no results. Update your search parameter to find w
 # Message displayed when the user has not selected repository and locales
 search.result.selectRepoAndLocale=Select at least one repository and locale before you can search.
 
+search.viewMode.title=View mode: {mode}
+
+search.viewMode.FULL=Full
+search.viewMode.REDUCED=Reduced
+search.viewMode.STANDARD=Standard
+search.viewMode.COMPACT=Compact
+
 # Label used in the header loggedInUser dropdown to show user's profile
 header.loggedInUser.profile=My Profile
 
@@ -362,6 +369,9 @@ textUnit.saveVirtualAssetTextUnit.failed=Couldn't not set translate attribute, c
 # Confirmation message
 textUnit.cancel.confirmation=Are you sure you want to cancel editing? You will lose the changes you've made.
 
+textUnit.tag.repo=repo
+textUnit.tag.asset=asset
+
 # Label displayed on the repositories dropdown in the workbench
 search.repository.btn.text={numberOfSelectedRepositories, plural, =0{Repositories} =1{1 repository} other{# repositories}}
 
diff --git a/webapp/src/main/resources/public/js/actions/workbench/ViewModeActions.js b/webapp/src/main/resources/public/js/actions/workbench/ViewModeActions.js
new file mode 100644
index 0000000000..390afff024
--- /dev/null
+++ b/webapp/src/main/resources/public/js/actions/workbench/ViewModeActions.js
@@ -0,0 +1,12 @@
+import alt from "../../alt";
+
+class ViewModeActions {
+
+    constructor() {
+        this.generateActions(
+            "changeViewMode",
+        );
+    }
+}
+
+export default alt.createActions(ViewModeActions);
diff --git a/webapp/src/main/resources/public/js/components/workbench/SearchResults.js b/webapp/src/main/resources/public/js/components/workbench/SearchResults.js
index f9624245c6..eb909323b0 100644
--- a/webapp/src/main/resources/public/js/components/workbench/SearchResults.js
+++ b/webapp/src/main/resources/public/js/components/workbench/SearchResults.js
@@ -18,6 +18,10 @@ import TextUnitSelectorCheckBox from "./TextUnitSelectorCheckBox";
 import WorkbenchActions from "../../actions/workbench/WorkbenchActions";
 import ReviewTextUnitsDTO from "../../stores/workbench/ReviewTextUnitsDTO";
 import TextUnitSDK from "../../sdk/TextUnit";
+import AltContainer from "alt-container";
+import ViewModeStore from "../../stores/workbench/ViewModeStore";
+import ViewModeDropdown from "./ViewModeDropdown";
+import ViewModeActions from "../../actions/workbench/ViewModeActions";
 
 let SearchResults = createReactClass({
     displayName: 'SearchResults',
@@ -513,14 +517,16 @@ let SearchResults = createReactClass({
     createTextUnitComponent(textUnit, arrayIndex) {
 
         return (
-            <TextUnit key={this.getTextUnitComponentKey(textUnit)}
-                      textUnit={textUnit} textUnitIndex={arrayIndex}
-                      translation={textUnit.getTarget()}
-                      isActive={arrayIndex === this.state.activeTextUnitIndex}
-                      isSelected={this.isTextUnitSelected(textUnit)}
-                      onEditModeSetToTrue={this.onTextUnitEditModeSetToTrue}
-                      onEditModeSetToFalse={this.onTextUnitEditModeSetToFalse}
-            />
+            <AltContainer key={this.getTextUnitComponentKey(textUnit)} stores={{"viewMode": ViewModeStore}}>
+                <TextUnit
+                        textUnit={textUnit} textUnitIndex={arrayIndex}
+                        translation={textUnit.getTarget()}
+                        isActive={arrayIndex === this.state.activeTextUnitIndex}
+                        isSelected={this.isTextUnitSelected(textUnit)}
+                        onEditModeSetToTrue={this.onTextUnitEditModeSetToTrue}
+                        onEditModeSetToFalse={this.onTextUnitEditModeSetToFalse}
+                />
+            </AltContainer>
         );
     },
 
@@ -584,12 +590,16 @@ let SearchResults = createReactClass({
                                 </DropdownButton>
                             </ButtonToolbar>
                         </div>
-                        <div className="pull-right">
+                        <div className="pull-right" style={{display: "flex", alignItems: "center", "gap": "15px"}}>
+                            <AltContainer store={ViewModeStore}>
+                                <ViewModeDropdown onModeSelected={(mode) => ViewModeActions.changeViewMode(mode)}/>
+                            </AltContainer>
+
                             <TextUnitSelectorCheckBox numberOfSelectedTextUnits={numberOfSelectedTextUnits}/>
                             <Button bsSize="small" disabled={previousPageButtonDisabled}
                                     onClick={this.onFetchPreviousPageClicked}><span
                                 className="glyphicon glyphicon-chevron-left"></span></Button>
-                            <label className="mls mrs default-label current-pageNumber">
+                            <label className="default-label current-pageNumber">
                                 {this.displayCurrentPageNumber()}
                             </label>
                             <Button bsSize="small" disabled={nextPageButtonDisabled}
diff --git a/webapp/src/main/resources/public/js/components/workbench/TextUnit.js b/webapp/src/main/resources/public/js/components/workbench/TextUnit.js
index e54ce4326b..40c2038508 100644
--- a/webapp/src/main/resources/public/js/components/workbench/TextUnit.js
+++ b/webapp/src/main/resources/public/js/components/workbench/TextUnit.js
@@ -32,6 +32,7 @@ import {
     OverlayTrigger,
     Tooltip
 } from "react-bootstrap";
+import ViewModeStore from "../../stores/workbench/ViewModeStore";
 
 
 let TextUnit = createReactClass({
@@ -218,7 +219,7 @@ let TextUnit = createReactClass({
         textUnit.setStatus(TextUnitSDK.STATUS.APPROVED);
         textUnit.setTarget(this.state.translation);
         textUnit.setTranslated(true);
-        
+
         return textUnit;
     },
 
@@ -382,7 +383,7 @@ let TextUnit = createReactClass({
         let rendered = '';
         if (!this.props.textUnit.isUsed()) {
             rendered = (
-                <Label bsStyle="default" className="mrxs"><FormattedMessage id="textUnit.unused"/></Label>
+                <Label bsStyle="default"><FormattedMessage id="textUnit.unused"/></Label>
             );
         }
         return rendered;
@@ -397,7 +398,7 @@ let TextUnit = createReactClass({
         let rendered = '';
         if (this.props.textUnit.getDoNotTranslate()) {
             rendered = (
-                <Label bsStyle="default" className="mrxs"><FormattedMessage id="textUnit.doNotTranslate"/></Label>
+                <Label bsStyle="default"><FormattedMessage id="textUnit.doNotTranslate"/></Label>
             );
         }
         return rendered;
@@ -412,7 +413,7 @@ let TextUnit = createReactClass({
         let rendered = '';
         if (this.props.textUnit.getPluralForm() != null) {
             rendered = (
-                <Label bsStyle="default" className="mrxs clickable" onClick={this.onPluralFormLabelClick}>
+                <Label bsStyle="default" className="clickable" onClick={this.onPluralFormLabelClick}>
                     {this.props.textUnit.getPluralForm()}
                 </Label>
             );
@@ -495,7 +496,7 @@ let TextUnit = createReactClass({
                                  dir={dir}
                                  onClick={this.onClickTextArea}/>
 
-                    <ButtonToolbar className="mtxs mbxs">
+                    <ButtonToolbar className="mtxs">
                         <Button bsStyle='primary' bsSize="small" disabled={saveDisabled}
                                 onClick={!saveDisabled ? this.saveTextUnitIfNeeded : null}>
                             <FormattedMessage id='label.save'/>
@@ -557,7 +558,7 @@ let TextUnit = createReactClass({
             }
 
             ui = (
-                <label className={targetClassName} onClick={this.editStringClicked} dir={dir}>
+                <label className={targetClassName} onClick={this.editStringClicked} dir={dir} style={{margin: "0px"}}>
                 {leadingWhitespacesSymbol}{targetString}{trailingWhitespacesSymbol}
                 </label>
             );
@@ -584,10 +585,10 @@ let TextUnit = createReactClass({
     },
 
     /**
-     * Handle click on the plural form label: stop event propagation (no need to 
-     * bubble up as we're reloading the workbench with new data) and update the 
-     * search parameter to show all plural forms for the string 
-     * 
+     * Handle click on the plural form label: stop event propagation (no need to
+     * bubble up as we're reloading the workbench with new data) and update the
+     * search parameter to show all plural forms for the string
+     *
      * @param {SyntheticEvent} e
      */
     onPluralFormLabelClick(e) {
@@ -670,6 +671,29 @@ let TextUnit = createReactClass({
         });
     },
 
+    /**
+     * Handle click on the repostiroty label: stop event propagation (no need to bubble
+     * up as we're reloading the workbench with new data) and update the search
+     * parameter to show strings for the given repository.
+     *
+     * @param {SyntheticEvent} e
+     */
+    onRepositoryClick(e) {
+
+        e.stopPropagation();
+
+        const repo = RepositoryStore.getRepositoryByName(this.props.textUnit.getRepositoryName());
+
+        WorkbenchActions.searchParamsChanged({
+            "changedParam": SearchConstants.UPDATE_ALL,
+            "repoIds": [repo.id],
+            "searchText": SearchParamsStore.getState().searchText,
+            "searchAttribute": SearchParamsStore.getState().searchAttribute,
+            "searchType": SearchParamsStore.SEARCH_TYPES.EXACT,
+            "bcp47Tags": [this.props.textUnit.getTargetLocale()]
+        });
+    },
+
     /**
      * Handling TextUnit onClick event
      * @param {SyntheticEvent} e
@@ -701,7 +725,7 @@ let TextUnit = createReactClass({
     handleErrorAlertDismiss() {
 
         WorkbenchActions.resetErrorState(this.props.textUnit);
- 
+
         this.setState({
             "isErrorAlertShown": false,
             "isEditMode" : true
@@ -803,15 +827,20 @@ let TextUnit = createReactClass({
         source = source.trim();
 
         return (
-            <div className="plx pts textunit-string">{leadingWhitespacesSymbol}{source}{trailingWhitespacesSymbol}</div>
+            <div className="textunit-string">{leadingWhitespacesSymbol}{source}{trailingWhitespacesSymbol}</div>
         );
     },
 
+    shouldRenderAssetLabel() {
+        return this.props.viewMode.viewMode === ViewModeStore.VIEW_MODE.FULL || this.props.viewMode.viewMode === ViewModeStore.VIEW_MODE.REDUCED;
+    },
+
     renderName() {
         const id = this.props.textUnit.getTmTextUnitId();
         const locale = this.props.textUnit.getTargetLocale();
+        const assetPrefix = this.props.intl.formatMessage({id: "textUnit.tag.asset"}) + ': ';
         let assetPathWithZeroWidthSpace = this.addZeroWidthSpace(this.props.textUnit.getAssetPath()); // to make the tooltip text to wrap
-        let assetPathTooltip = <Tooltip id={`${id}-${locale}-assetPath`}>{assetPathWithZeroWidthSpace}</Tooltip>;
+        let assetPathTooltip = <Tooltip id={`${id}-${locale}-assetPath`}>{assetPrefix + assetPathWithZeroWidthSpace}</Tooltip>;
         let assetPathWithGitInfoTooltip =
             <Tooltip id={`${id}-${locale}-gitInfo`}>{this.props.intl.formatMessage( {id: 'workbench.gitBlameModal.info'} )}</Tooltip>;
 
@@ -823,10 +852,13 @@ let TextUnit = createReactClass({
         return (<span className="clickable textunit-name"
                       onClick={this.onStringIdClick}>
                     <span>{this.props.textUnit.getName()}</span>
-                    <OverlayTrigger placement="top" overlay={assetPathTooltip}>
-                        <span className="textunit-assetpath glyphicon glyphicon-level-up mls"
-                               onClick={this.onAssetPathClick} />
-                    </OverlayTrigger>
+
+                    {!this.shouldRenderAssetLabel() &&
+                        <OverlayTrigger placement="top" overlay={assetPathTooltip}>
+                            <span className="textunit-assetpath glyphicon glyphicon-level-up mls"
+                                onClick={this.onAssetPathClick} />
+                        </OverlayTrigger>
+                    }
 
                     <OverlayTrigger placement="top" overlay={assetPathWithGitInfoTooltip}>
                         <span className="textunit-gitInfo glyphicon glyphicon-info-sign mls"
@@ -841,17 +873,74 @@ let TextUnit = createReactClass({
         );
     },
 
+    renderRepository() {
+        if (this.props.viewMode.viewMode !== ViewModeStore.VIEW_MODE.FULL) {
+            return;
+        }
+
+        let repoName = this.props.textUnit.getRepositoryName();
+        if (this.props.viewMode.viewMode === ViewModeStore.VIEW_MODE.FULL) {
+            repoName = this.props.intl.formatMessage({id: "textUnit.tag.repo"}) + ': ' + repoName;
+        }
+
+        return (
+            <Label bsStyle='default' bsSize='large' className="clickable" onClick={this.onRepositoryClick}>
+                {repoName}
+            </Label>
+        );
+    },
+
+    renderAsset() {
+        if (!this.shouldRenderAssetLabel()) {
+            return;
+        }
+
+        const id = this.props.textUnit.getTmTextUnitId();
+        const locale = this.props.textUnit.getTargetLocale();
+        const assetPrefix = this.props.intl.formatMessage({id: "textUnit.tag.asset"}) + ': ';
+        let assetPathWithZeroWidthSpace = this.addZeroWidthSpace(this.props.textUnit.getAssetPath()); // to make the tooltip text to wrap
+        let assetPathTooltip = <Tooltip id={`${id}-${locale}-assetPath`}>{assetPrefix + assetPathWithZeroWidthSpace}</Tooltip>;
+        let displayAssetPath = assetPathWithZeroWidthSpace;
+
+        if (this.props.viewMode.viewMode === ViewModeStore.VIEW_MODE.REDUCED) {
+            // Remove file extension
+            displayAssetPath = displayAssetPath.replace(/\.[^.]+/, '');
+        } else if (this.props.viewMode.viewMode === ViewModeStore.VIEW_MODE.FULL) {
+            displayAssetPath = this.props.intl.formatMessage({id: "textUnit.tag.asset"}) + ': ' + displayAssetPath;
+        }
+
+        return (
+            <OverlayTrigger placement="top" overlay={assetPathTooltip}>
+                <Label style={{maxWidth: "256px", overflow: "hidden"}} bsStyle='default' bsSize='large' className="clickable" onClick={this.onAssetPathClick}>
+                    {displayAssetPath}
+                </Label>
+            </OverlayTrigger>
+        );
+    },
+
+    renderComment() {
+        if (this.props.viewMode.viewMode === ViewModeStore.VIEW_MODE.COMPACT) {
+            return;
+        }
+
+        return (
+            <div className="em color-gray-light2 textunit-comment">
+                {this.props.textUnit.getComment()}
+            </div>
+        );
+    },
+
     addZeroWidthSpace(string) {
-        
+
         let newString = "";
-        
+
         [...string].forEach(c => {
             if (newString.length % 10 === 0) {
                 newString += '\u200B';
-            }        
+            }
             newString += c;
         });
-        
+
         return newString;
     },
 
@@ -895,7 +984,7 @@ let TextUnit = createReactClass({
 
     render() {
         // TODO: Must show which repository a string belongs to when multiple repositories are selected
-        let textunitClass = "mrm pbm ptm textunit";
+        let textunitClass = "mrm pbs pts textunit";
         let isActive = this.props.isActive;
         let isSelected = this.props.isSelected;
         if (isActive) {
@@ -904,43 +993,53 @@ let TextUnit = createReactClass({
         if (isSelected) {
             textunitClass = textunitClass + " textunit-selected";
         }
-        
+
         return (
             <div ref="textunit" className={textunitClass} onKeyUp={this.onKeyUpTextUnit} tabIndex={0}
                  onClick={this.onTextUnitClick}>
             {this.getErrorAlert()}
                 <div>
-                    <Grid fluid={true}>
-                        <Row className='show-grid'>
-                            <Col xs={11}>
-                                <span className="mrxs">
-                                    <input type="checkbox" checked={isSelected} readOnly={true}/>
-                                </span>
-                                <Label bsStyle='primary' bsSize='large' className="mrxs mtl clickable"
-                                       onClick={this.onLocaleLabelClick}>
+                    <div className="text-unit-root">
+                        <div className="left mls">
+                            <span style={{gridArea: "cb"}} className="mrxs">
+                                <input type="checkbox" checked={isSelected} readOnly={true}/>
+                            </span>
+                            <div style={{gridArea: "locale"}}>
+                                <Label bsStyle='primary' bsSize='large' className="clickable" onClick={this.onLocaleLabelClick}>
                                     {this.props.textUnit.getTargetLocale()}
                                 </Label>
+                            </div>
+                            <div style={{gridArea: "repo"}}>
+                                {this.renderRepository()}
+                            </div>
+                            <div style={{gridArea: "res"}}>
+                                {this.renderAsset()}
+                            </div>
+                            <div style={{gridArea: "labels", display: "flex", "gap": "5px"}}>
                                 {this.renderUnusedLabel()}
                                 {this.renderDoNotTranslateLabel()}
                                 {this.renderPluralFormLabel()}
+                            </div>
+                            <div style={{gridArea: "name"}}>
                                 {this.renderName()}
-                            </Col>
-                        </Row>
-                        <Row className='show-grid'>
-                            <Col md={6}>
-                                <Row>
-                                    {this.renderSource()}
-                                    <div className="plx em color-gray-light2 textunit-comment">{this.props.textUnit.getComment()}</div>
-                                </Row>
-                            </Col>
-                            <Col md={6}>
-                                <Row>
-                                    {this.getTargetStringUI()}
-                                    <span className="textunit-actionbar mrxs">{this.renderReviewGlyph()}</span>
-                                </Row>
-                            </Col>
-                        </Row>
-                    </Grid>
+                            </div>
+                            <div style={{gridArea: "source"}}>
+                                {this.renderSource()}
+                            </div>
+                            <div style={{gridArea: "comment"}}>
+                                {this.renderComment()}
+                            </div>
+                        </div>
+
+                        <div className="right mrs">
+                            <div style={{gridArea: "target"}}>
+                                {this.getTargetStringUI()}
+                            </div>
+                            <span style={{gridArea: "review"}}>
+                                {this.renderReviewGlyph()}
+                            </span>
+                        </div>
+                    </div>
                 </div>
                 {this.getTextUnitReviewModal()}
                 {this.getCancelConfirmationModel()}
diff --git a/webapp/src/main/resources/public/js/components/workbench/TextUnitSelectorCheckBox.js b/webapp/src/main/resources/public/js/components/workbench/TextUnitSelectorCheckBox.js
index 5a4a453792..1e2c6917b2 100644
--- a/webapp/src/main/resources/public/js/components/workbench/TextUnitSelectorCheckBox.js
+++ b/webapp/src/main/resources/public/js/components/workbench/TextUnitSelectorCheckBox.js
@@ -42,7 +42,7 @@ class TextUnitSelectorCheckBox extends React.Component {
 
     render() {
         return (
-            <DropdownButton id="Text" title={this.getTitle()} className="mrl" onSelect={this.selectionChanged}>
+            <DropdownButton id="Text" title={this.getTitle()} onSelect={this.selectionChanged}>
                 <MenuItem eventKey={this.SELECT_ALL_IN_PAGE}><FormattedMessage id="workbench.toolbar.selectAllInPage"/></MenuItem>
                 <MenuItem eventKey={this.CLEAR_ALL_IN_PAGE}><FormattedMessage
                     id="workbench.toolbar.clearAllInPage"/></MenuItem>
diff --git a/webapp/src/main/resources/public/js/components/workbench/ViewModeDropdown.js b/webapp/src/main/resources/public/js/components/workbench/ViewModeDropdown.js
new file mode 100644
index 0000000000..6c0583997a
--- /dev/null
+++ b/webapp/src/main/resources/public/js/components/workbench/ViewModeDropdown.js
@@ -0,0 +1,34 @@
+import _ from "lodash";
+import React from "react";
+import createReactClass from 'create-react-class';
+import {FormattedMessage, injectIntl} from 'react-intl';
+import {DropdownButton, MenuItem} from "react-bootstrap";
+
+import ViewModeStore from "../../stores/workbench/ViewModeStore";
+
+let ViewModeDropdown = createReactClass({
+    renderModeMenuItem(mode) {
+        return (
+            <MenuItem eventKey={mode} active={this.props.viewMode === mode} onSelect={this.props.onModeSelected}>
+                <FormattedMessage id={"search.viewMode." + mode} />
+            </MenuItem>
+        );
+    },
+
+    render() {
+        return (
+            <DropdownButton
+                id="WorkbenchStatusDropdown"
+                title={this.props.intl.formatMessage({id: "search.viewMode.title"}, {mode: this.props.intl.formatMessage({id: "search.viewMode." + this.props.viewMode})})}
+            >
+                {this.renderModeMenuItem(ViewModeStore.VIEW_MODE.FULL)}
+                {this.renderModeMenuItem(ViewModeStore.VIEW_MODE.REDUCED)}
+                {this.renderModeMenuItem(ViewModeStore.VIEW_MODE.STANDARD)}
+                {this.renderModeMenuItem(ViewModeStore.VIEW_MODE.COMPACT)}
+            </DropdownButton>
+        );
+    },
+});
+
+
+export default injectIntl(ViewModeDropdown);
diff --git a/webapp/src/main/resources/public/js/stores/workbench/TextUnitStore.js b/webapp/src/main/resources/public/js/stores/workbench/TextUnitStore.js
index a8e9ff3015..cf21057766 100644
--- a/webapp/src/main/resources/public/js/stores/workbench/TextUnitStore.js
+++ b/webapp/src/main/resources/public/js/stores/workbench/TextUnitStore.js
@@ -110,6 +110,10 @@ class TextUnitStore {
      * @param {TextUnit} textUnit
      */
     resetErrorState(textUnit) {
+        if (!textUnit) {
+            this.errorsKeyedByTextUnitKey = [];
+            return;
+        }
         delete this.errorsKeyedByTextUnitKey[textUnit.getTextUnitKey()];
     }
 
diff --git a/webapp/src/main/resources/public/js/stores/workbench/ViewModeStore.js b/webapp/src/main/resources/public/js/stores/workbench/ViewModeStore.js
new file mode 100644
index 0000000000..41dcbfaa74
--- /dev/null
+++ b/webapp/src/main/resources/public/js/stores/workbench/ViewModeStore.js
@@ -0,0 +1,28 @@
+import alt from "../../alt";
+import ViewModeActions from "../../actions/workbench/ViewModeActions";
+
+class ViewModeStore {
+    constructor() {
+        this.viewMode = window.localStorage.getItem("viewMode");
+        if (this.viewMode == null) {
+            this.viewMode = ViewModeStore.VIEW_MODE.STANDARD;
+            window.localStorage.setItem("viewMode", this.viewMode)
+        }
+
+        this.bindActions(ViewModeActions);
+    }
+
+    changeViewMode(viewMode) {
+        this.viewMode = viewMode;
+        window.localStorage.setItem("viewMode", this.viewMode)
+    }
+}
+
+ViewModeStore.VIEW_MODE = {
+    "FULL": "FULL",
+    "REDUCED": "REDUCED",
+    "STANDARD": "STANDARD",
+    "COMPACT": "COMPACT",
+}
+
+export default alt.createStore(ViewModeStore, 'ViewModeStore');
diff --git a/webapp/src/main/resources/sass/mojito.scss b/webapp/src/main/resources/sass/mojito.scss
index 0380dadd25..e0be296f2c 100644
--- a/webapp/src/main/resources/sass/mojito.scss
+++ b/webapp/src/main/resources/sass/mojito.scss
@@ -420,7 +420,7 @@ div.textunit label {
 }
 
 .textunit-string {
-    width: 90%;
+    width: 100%;
     white-space: pre-wrap;
 }
 
@@ -462,15 +462,51 @@ div.textunit label {
     border: 1px dotted gray;
 }
 
-.textunit-actionbar {
-    position: absolute;
-    right: 0;
-}
-
 .textunit-comment {
     white-space: pre-wrap;
 }
 
+.text-unit-root {
+    display: grid;
+    align-items: center;
+    width: 100%;
+    gap: 15px;
+
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content;
+}
+
+.text-unit-root .left {
+    flex-grow: 1;
+    height: 100%;
+    display: grid;
+    gap: 7px;
+    align-items: center;
+
+    grid-template-columns: min-content min-content min-content fit-content(100%) 1fr min-content min-content;
+    grid-template-rows: min-content 1fr min-content min-content 1fr;
+    grid-template-areas:
+        "cb locale  labels  name    .        res      repo"
+        "cb .       .       .       .        .        ."
+        "cb source  source  source  source   source   ."
+        "cb comment comment comment .        .        ."
+        "cb .       .       .       .        .        ."
+    ;
+}
+
+.text-unit-root .right {
+    flex-grow: 1;
+    display: grid;
+    align-items: center;
+    justify-items: stretch;
+
+    grid-template-columns: 1fr 33px min-content;
+    grid-template-rows: min-content;
+    grid-template-areas:
+        "target . review"
+    ;
+}
+
 div.textunit div.targetstring-container {
     float: left;
     width: 90%;