diff --git a/apps/sensenet/src/components/Breadcrumbs.tsx b/apps/sensenet/src/components/Breadcrumbs.tsx
index 384fd47b4..f8289d2ca 100644
--- a/apps/sensenet/src/components/Breadcrumbs.tsx
+++ b/apps/sensenet/src/components/Breadcrumbs.tsx
@@ -26,11 +26,16 @@ export function Breadcrumbs<T extends GenericContent>(props: BreadcrumbProps<T>)
 
   return (
     <>
-      <MUIBreadcrumbs maxItems={5} aria-label="breadcrumb">
+      <MUIBreadcrumbs
+        maxItems={5}
+        aria-label="breadcrumb"
+        style={{ marginLeft: '8.5px' }}
+        classes={{ separator: 'bread-crumbs-separator' }}>
         {props.items.map((item) => (
           <DropFileArea key={item.content.Id} parentContent={item.content} style={{ display: 'flex' }}>
             <Tooltip title={item.title}>
               <Button
+                style={{ minWidth: '12px' }}
                 data-test={`breadcrumb-item-${item.displayName.replace(/\s+/g, '-').toLowerCase()}`}
                 aria-label={item.displayName}
                 onClick={(ev) => props.onItemClick(ev, item)}
diff --git a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx
index 9a0ee8135..8792ae12f 100644
--- a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx
+++ b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx
@@ -1,21 +1,22 @@
-import { AppBar, createStyles, IconButton, makeStyles, Toolbar } from '@material-ui/core'
+import { AppBar, createStyles, IconButton, makeStyles, Theme, Toolbar } from '@material-ui/core'
 import Menu from '@material-ui/icons/Menu'
 import { useRepository } from '@sensenet/hooks-react'
 import { clsx } from 'clsx'
 import React, { useContext } from 'react'
 import { Link } from 'react-router-dom'
-import logo from '../../assets/sensenet-icon-32.png'
+import logo from '../../../../../../sn-client/examples/sn-dms-demo/src/assets/sensenet_white.png'
 import { ResponsivePersonalSettings } from '../../context'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { CommandPalette } from '../command-palette/CommandPalette'
 import { DesktopNavMenu } from './desktop-nav-menu'
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     appBar: {
       position: 'relative',
       height: globals.common.headerHeight,
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
     toolBar: {
@@ -26,8 +27,7 @@ const useStyles = makeStyles(() => {
       paddingRight: 0,
     },
     logo: {
-      marginRight: '40px',
-      filter: 'drop-shadow(0px 0px 3px black)',
+      marginRight: '32px',
     },
     commandPaletteReplacement: {
       flex: 1,
diff --git a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx
index 10dbcebf1..2f3a5e82c 100644
--- a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx
+++ b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx
@@ -235,7 +235,7 @@ export const DesktopNavMenu: FunctionComponent = () => {
                   <Typography component="div" className={classes.checkboxMenuItem} style={{ width: '100%' }}>
                     <Grid component="label" container alignItems="center" justify="space-between">
                       <Grid item style={{ paddingRight: '16px' }} data-test="theme-status">
-                        {personalSettings.theme === 'dark' ? 'Light theme' : 'Dark theme'}
+                        {'Dark theme'}
                       </Grid>
                       <Grid item>
                         <Switch
diff --git a/apps/sensenet/src/components/content-list/contenttype-list.tsx b/apps/sensenet/src/components/content-list/contenttype-list.tsx
index 3f5594daf..0ed8d5cdf 100644
--- a/apps/sensenet/src/components/content-list/contenttype-list.tsx
+++ b/apps/sensenet/src/components/content-list/contenttype-list.tsx
@@ -1,7 +1,7 @@
-import React, { lazy, useState } from 'react'
-import { PATHS } from '../../application-paths'
 import { Switch } from '@sensenet/controls-react'
 import { useRepository } from '@sensenet/hooks-react'
+import React, { lazy, useState } from 'react'
+import { PATHS } from '../../application-paths'
 
 const ContentComponent = lazy(() => import(/* webpackChunkName: "content" */ '../content'))
 
@@ -17,11 +17,12 @@ const ContentTypeList: React.FC = () => {
     }
 
     return (
-      <div style={{ marginTop: '20px', marginBottom: '20px' }}>
-        <label htmlFor="showHiddenTypes" style={{ marginRight: '10px' }}>
+      <div style={{ marginTop: '12px', marginBottom: '12px' }}>
+        <label htmlFor="showHiddenTypes" style={{ marginRight: '10px', paddingLeft: '17px', cursor: 'pointer' }}>
           Show hidden types
         </label>
         <Switch
+          id="showHiddenTypes"
           data-test="hidden-type-switch"
           size="medium"
           checked={showHiddenTypes}
@@ -31,10 +32,9 @@ const ContentTypeList: React.FC = () => {
     )
   }
 
-  const contentTypeQuery =
-    "+TypeIs:'ContentType'" +
-    (isCategoryFieldAvailable && !showHiddenTypes ? ' -Categories:*HideByDefault*' : '') +
-    ' .AUTOFILTERS:OFF'
+  const contentTypeQuery = `+TypeIs:'ContentType'${
+    isCategoryFieldAvailable && !showHiddenTypes ? ' -Categories:*HideByDefault*' : ''
+  } .AUTOFILTERS:OFF`
 
   return (
     <ContentComponent
diff --git a/apps/sensenet/src/components/dialogs/dialog-title.ts b/apps/sensenet/src/components/dialogs/dialog-title.ts
index eb73710fc..ce058939c 100644
--- a/apps/sensenet/src/components/dialogs/dialog-title.ts
+++ b/apps/sensenet/src/components/dialogs/dialog-title.ts
@@ -4,7 +4,8 @@ import { globals } from '../../globalStyles'
 export const DialogTitle = withStyles((theme: Theme) => ({
   root: {
     padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`,
-    backgroundColor: globals.common.headerBackground,
+    backgroundColor:
+      theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
     textAlign: 'center',
     color: globals.common.headerText,
     marginBottom: theme.spacing(1),
diff --git a/apps/sensenet/src/components/login/auth-override-skeleton.tsx b/apps/sensenet/src/components/login/auth-override-skeleton.tsx
index 60ed042bb..dd22110be 100644
--- a/apps/sensenet/src/components/login/auth-override-skeleton.tsx
+++ b/apps/sensenet/src/components/login/auth-override-skeleton.tsx
@@ -1,14 +1,15 @@
-import { AppBar, Button, Container, createStyles, makeStyles, Toolbar, Typography } from '@material-ui/core'
+import { AppBar, Button, Container, createStyles, makeStyles, Theme, Toolbar, Typography } from '@material-ui/core'
 import React from 'react'
 import { NavLink } from 'react-router-dom'
-import logo from '../../assets/sensenet-icon-32.png'
+import logo from '../../../../../../sn-client/examples/sn-dms-demo/src/assets/sensenet_white.png'
 import { globals, useGlobalStyles } from '../../globalStyles'
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     appBar: {
       height: globals.common.headerHeight,
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
     toolBar: {
@@ -16,7 +17,8 @@ const useStyles = makeStyles(() =>
       justifyContent: 'space-between',
       height: '100%',
       paddingRight: 0,
-      paddingLeft: '32px',
+      paddingLeft: '16px',
+      marginTop: '-12px',
     },
     contentWrapper: {
       minHeight: 'calc(100vh - 180px)',
@@ -33,7 +35,8 @@ const useStyles = makeStyles(() =>
     },
     footer: {
       height: '180px',
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
   }),
@@ -55,7 +58,7 @@ export const AuthOverrideSkeleton = (props: {
           <Toolbar className={classes.toolBar}>
             <div className={globalClasses.centeredVertical}>
               <NavLink to="/" style={{ display: 'flex', marginRight: '38px' }}>
-                <img src={logo} alt="logo" />
+                <img src={logo} alt="logo" style={{ height: '32px', marginTop: '1px' }} />
               </NavLink>
             </div>
           </Toolbar>
diff --git a/apps/sensenet/src/components/login/login-page.tsx b/apps/sensenet/src/components/login/login-page.tsx
index 81f7502a7..96e9f78e8 100644
--- a/apps/sensenet/src/components/login/login-page.tsx
+++ b/apps/sensenet/src/components/login/login-page.tsx
@@ -9,22 +9,24 @@ import {
   makeStyles,
   TextField,
   TextFieldProps,
+  Theme,
   Typography,
 } from '@material-ui/core'
 import { PathHelper } from '@sensenet/client-utils'
 import { clsx } from 'clsx'
 import React, { useRef } from 'react'
 import { Link } from 'react-router-dom'
-import snLogo from '../../assets/sensenet-icon-32.png'
+import snLogo from '../../../../../../sn-client/examples/sn-dms-demo/src/assets/sensenet_white.png'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     appBar: {
       position: 'relative',
       height: globals.common.headerHeight,
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
     loginSubtitle: {
@@ -73,9 +75,9 @@ export default function LoginPage({ handleSubmit, isLoginInProgress }: LoginPage
       <AppBar position="sticky" className={clsx(globalClasses.centeredHorizontal, classes.appBar)}>
         <Grid container direction="row">
           <Grid item xs={1}>
-            <Grid container justify="flex-end">
+            <Grid container style={{ paddingLeft: '16px', paddingTop: '4px' }}>
               <Link to="/">
-                <img src={snLogo} alt="sensenet logo" />
+                <img src={snLogo} alt="sensenet logo" style={{ height: '32px', marginTop: '1px' }} />
               </Link>
             </Grid>
           </Grid>
diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx
index ae61de947..c5047a787 100644
--- a/apps/sensenet/src/components/settings/settings-table.tsx
+++ b/apps/sensenet/src/components/settings/settings-table.tsx
@@ -7,29 +7,33 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  TableSortLabel,
+  Theme,
+  Tooltip,
+  Typography,
 } from '@material-ui/core'
 
 import { Delete, Edit, InfoOutlined } from '@material-ui/icons'
 import { Settings } from '@sensenet/default-content-types'
 import { useRepository } from '@sensenet/hooks-react'
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import { Link, useHistory } from 'react-router-dom'
 import { ResponsivePersonalSettings } from '../../context'
 import { useLocalization } from '../../hooks'
 import { getPrimaryActionUrl } from '../../services'
 import { useDialog } from '../dialogs'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: Theme) => ({
   tableHead: {
-    backgroundColor: 'hsl(0deg 0% 24%)',
+    backgroundColor: theme.palette.type === 'dark' ? 'hsl(0deg 0% 24%)' : 'hsl(0deg 0% 92%)',
     cursor: 'default',
   },
   tableHeadCell: {
-    color: 'white',
+    color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : '#666666',
     fontSize: '1.1rem',
   },
   stickyTableHeadCell: {
-    color: 'white',
+    color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : '#666666',
     padding: '0px 1px 0px 0px',
     margin: 0,
     textAlign: 'center',
@@ -79,11 +83,45 @@ const isSystemSettings = [
 ]
 export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}`
 
+export interface UpdatedSettings extends Settings {
+  nameToDisplay: string
+  nameToTest: string
+}
+
 export interface SettingsTableProps {
   settings: Settings[]
   onContextMenu: (ev: React.MouseEvent, setting: Settings) => void
 }
 
+const stripHtml = (html: string) => {
+  const div = document.createElement('div')
+  div.innerHTML = html
+  return div.textContent || div.innerText || ''
+}
+
+const sortArray = (array: UpdatedSettings[], order: 'asc' | 'desc', orderBy: keyof UpdatedSettings) => {
+  return array.sort((a, b) => {
+    const aO = a[orderBy]
+    const bO = b[orderBy]
+    if (!aO) {
+      return order === 'asc' ? -1 : 1
+    } else if (!bO) {
+      return order === 'asc' ? 1 : -1
+    } else if (aO && bO) {
+      const aValue = orderBy === 'Description' ? stripHtml(aO.toLocaleString()) : aO.toLocaleString()
+      const bValue = orderBy === 'Description' ? stripHtml(bO.toLocaleString()) : bO.toLocaleString()
+      if (aValue < bValue) {
+        return order === 'asc' ? -1 : 1
+      } else if (aValue > bValue) {
+        return order === 'asc' ? 1 : -1
+      } else {
+        return 0
+      }
+    }
+    return 0
+  })
+}
+
 export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) => {
   const classes = useStyles()
   const localization = useLocalization().settings
@@ -91,25 +129,54 @@ export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) =
   const uiSettings = useContext(ResponsivePersonalSettings)
   const history = useHistory()
   const { openDialog } = useDialog()
-  const updatedSettings = settings.map((setting: Settings) => {
-    return {
-      ...setting,
-      nameToDisplay: setting.Name.split('.')[0]
-        .replace(/([A-Z])/g, ' $1')
-        .trim(),
-      nameToTest: setting.Name.replace(/\.settings/gi, '')
-        .replace(/\s+/g, '-')
-        .toLowerCase(),
-    }
-  })
+
+  const [order, setOrder] = useState<'asc' | 'desc'>('asc')
+  const [orderBy, setOrderBy] = useState<keyof UpdatedSettings>('nameToDisplay')
+
+  const handleRequestSort = (property: keyof UpdatedSettings) => {
+    const isAsc = orderBy === property && order === 'asc'
+    setOrder(isAsc ? 'desc' : 'asc')
+    setOrderBy(property)
+  }
+
+  const updatedSettings: UpdatedSettings[] = settings.map((setting: Settings) => ({
+    ...setting,
+    nameToDisplay: setting.Name.split('.')[0]
+      .replace(/([A-Z])/g, ' $1')
+      .trim(),
+    nameToTest: setting.Name.replace(/\.settings/gi, '')
+      .replace(/\s+/g, '-')
+      .toLowerCase(),
+  }))
+
+  const sortedSettings = sortArray(updatedSettings, order, orderBy)
   const hasDeletableSetting = updatedSettings.some((setting) => !isSystemSettings.includes(setting.Name.split('.')[0]))
+
   return (
     <TableContainer>
       <Table>
         <TableHead className={classes.tableHead}>
           <TableRow>
-            <TableCell className={classes.tableHeadCell}>{localization.name}</TableCell>
-            <TableCell className={classes.tableHeadCell}>{localization.description}</TableCell>
+            <TableCell className={classes.tableHeadCell}>
+              <Tooltip title={localization.name}>
+                <TableSortLabel
+                  active={orderBy === 'nameToDisplay'}
+                  direction={orderBy === 'nameToDisplay' ? order : 'asc'}
+                  onClick={() => handleRequestSort('nameToDisplay')}>
+                  {localization.name}
+                </TableSortLabel>
+              </Tooltip>
+            </TableCell>
+            <TableCell className={classes.tableHeadCell}>
+              <Tooltip title={localization.description}>
+                <TableSortLabel
+                  active={orderBy === 'Description'}
+                  direction={orderBy === 'Description' ? order : 'asc'}
+                  onClick={() => handleRequestSort('Description')}>
+                  {localization.description}
+                </TableSortLabel>
+              </Tooltip>
+            </TableCell>
             <TableCell className={classes.stickyTableHeadCell}>{localization.edit}</TableCell>
             <TableCell className={classes.stickyTableHeadCell}>{localization.learnMore}</TableCell>
             {hasDeletableSetting && (
@@ -118,7 +185,7 @@ export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) =
           </TableRow>
         </TableHead>
         <TableBody>
-          {updatedSettings.map((setting) => (
+          {sortedSettings.map((setting: UpdatedSettings) => (
             <TableRow
               key={setting.Id}
               className={classes.tableRow}
@@ -130,7 +197,11 @@ export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) =
                 {setting.nameToDisplay}
               </TableCell>
               <TableCell className={`${classes.tableCell} ${classes.descriptionCell}`}>
-                {setting.Description || '-'}
+                <Typography
+                  color="textSecondary"
+                  style={{ wordWrap: 'break-word' }}
+                  dangerouslySetInnerHTML={{ __html: setting.Description || '' }}
+                />
               </TableCell>
               <TableCell className={classes.stickyCell}>
                 <Link
diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index 6a1d351c3..cfc8a00cc 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -152,7 +152,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
 
     if (item.expanded && item.children) {
       children = item.children.map((child, index) => {
-        return renderItem(child, `${keyPrefix}-${index}`, paddingLeft + 20)
+        return renderItem(child, `${keyPrefix}-${index}`, paddingLeft + 12)
       })
     }
 
@@ -178,7 +178,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
           style={{ paddingLeft }}
           data-item-name={item.Name}
           button>
-          <ListItemIcon>
+          <ListItemIcon style={{ minWidth: '32px' }}>
             <Icon item={item} />
           </ListItemIcon>
           <div className="text-container">
@@ -219,7 +219,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
       )
     }
     return (
-      <MuiList key={key} style={{ padding: 0 }}>
+      <MuiList key={key} style={{ ...style, padding: '0' }}>
         {renderItem(treeData.children?.[index], index.toString(), 10)}
       </MuiList>
     )
diff --git a/apps/sensenet/src/components/view-controls/common/styles.ts b/apps/sensenet/src/components/view-controls/common/styles.ts
index cbb9f6f46..1b13733a3 100644
--- a/apps/sensenet/src/components/view-controls/common/styles.ts
+++ b/apps/sensenet/src/components/view-controls/common/styles.ts
@@ -10,7 +10,6 @@ const useStyles = makeStyles(() => {
       maxHeight: `calc(100% - ${globals.common.formActionButtonsHeight}px - ${globals.common.formTitleHeight}px)`,
     },
     fieldWrapper: {
-      display: 'flex',
       alignItems: 'center',
       flexFlow: 'column',
       padding: '15px !important',
diff --git a/apps/sensenet/src/context/ThemeProvider.tsx b/apps/sensenet/src/context/ThemeProvider.tsx
index 5b004f34e..addb85011 100644
--- a/apps/sensenet/src/context/ThemeProvider.tsx
+++ b/apps/sensenet/src/context/ThemeProvider.tsx
@@ -75,9 +75,9 @@ export const ThemeProvider: React.FunctionComponent = (props) => {
           secondary: pageTheme === 'light' ? '#000000' : '#FFFFFF',
         },
         primary: {
-          light: '#80cbc4',
-          main: '#26a69a',
-          dark: '#00796b',
+          light: '#00B1E4',
+          main: '#0192db',
+          dark: '#004E8F',
         },
         secondary: {
           light: '#90caf9',
diff --git a/apps/sensenet/src/globalStyles.ts b/apps/sensenet/src/globalStyles.ts
index a1326dc37..4aca9de4a 100644
--- a/apps/sensenet/src/globalStyles.ts
+++ b/apps/sensenet/src/globalStyles.ts
@@ -13,7 +13,8 @@ export const globals = {
     settingsDrawerWidth: 250,
     addButtonHeight: 60,
     //Colors
-    headerBackground: '#353B4E',
+    headerBackground: '#0192db',
+    headerLightBackground: '#0192db',
     headerText: 'rgba(255,255,255,0.87)',
     secondaryIconSize: '16px',
     elavationShadow: '1px 1px 3px 0px hsl(0deg 0% 0% / 28%)',
@@ -82,7 +83,7 @@ export const useGlobalStyles = makeStyles((theme: Theme) => {
     contentTitle: {
       height: globals.common.drawerItemHeight,
       minHeight: globals.common.drawerItemHeight,
-      paddingLeft: '15px',
+      paddingLeft: '16px',
     },
     drawerButton: {
       width: '32px',
diff --git a/apps/sensenet/src/style.css b/apps/sensenet/src/style.css
index 90c31c3e7..3265d7302 100644
--- a/apps/sensenet/src/style.css
+++ b/apps/sensenet/src/style.css
@@ -6,3 +6,8 @@ ul[role='listbox'] {
   margin: 0;
   padding: 0;
 }
+
+.bread-crumbs-separator {
+  padding: 0;
+  margin: 0;
+}
diff --git a/examples/sn-dms-demo/cypress/support/commands.ts b/examples/sn-dms-demo/cypress/support/commands.ts
index 95f1d0e82..c11defaf4 100644
--- a/examples/sn-dms-demo/cypress/support/commands.ts
+++ b/examples/sn-dms-demo/cypress/support/commands.ts
@@ -51,7 +51,7 @@ const blobToFile = (theBlob: Blob, fileName: string): File => {
 
 Cypress.Commands.add('uploadWithApi', (options: UploadOptions) => {
   cy.visit('')
-  cy.fixture('logo.png').then(async (img) => {
+  cy.fixture('sensenet_white.png').then(async (img) => {
     Cypress.log({
       name: 'upload',
       consoleProps: () => {
diff --git a/examples/sn-dms-demo/src/components/AppBarLogo.tsx b/examples/sn-dms-demo/src/components/AppBarLogo.tsx
index be5f06b3d..02fd7e9b2 100644
--- a/examples/sn-dms-demo/src/components/AppBarLogo.tsx
+++ b/examples/sn-dms-demo/src/components/AppBarLogo.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import MediaQuery from 'react-responsive'
 import { Link } from 'react-router-dom'
-import sensenetLogo from '../assets/logo.png'
+import sensenetLogo from '../assets/sensenet_white.png'
 
 const styles = {
   logo: {
diff --git a/examples/sn-dms-demo/src/pages/Login.tsx b/examples/sn-dms-demo/src/pages/Login.tsx
index ba8d8533a..75550cca5 100644
--- a/examples/sn-dms-demo/src/pages/Login.tsx
+++ b/examples/sn-dms-demo/src/pages/Login.tsx
@@ -1,8 +1,8 @@
 import Button from '@material-ui/core/Button'
 import React from 'react'
 import MediaQuery from 'react-responsive'
-import logo from '../assets/logo.png'
 import { resources } from '../assets/resources'
+import logo from '../assets/sensenet_white.png'
 import { WelcomeMessage } from '../components/WelcomeMessage'
 import { userManager } from '../userManager'
 
diff --git a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
index 898559505..b95848d8d 100644
--- a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
@@ -113,7 +113,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
                 format="yyyy MMMM dd hh:mm aaaa"
-                InputProps={{ readOnly: true, style: { minWidth: '200px' } }}
+                InputProps={{ readOnly: true, style: { minWidth: '200px', width: '100%' } }}
               />
             )}
             {!hideDescription && <FormHelperText>{settings.Description}</FormHelperText>}
diff --git a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
index b574879b9..2e2e4efcf 100644
--- a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
@@ -57,7 +57,7 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
     case 'new':
       return (
         <FormControl
-          style={{ minWidth: '220px' }}
+          style={{ minWidth: '220px', width: '100%' }}
           required={props.settings.Compulsory}
           disabled={props.settings.ReadOnly}>
           <InputLabel htmlFor={props.settings.Name} shrink={true}>
diff --git a/packages/sn-controls-react/src/fieldcontrols/number.tsx b/packages/sn-controls-react/src/fieldcontrols/number.tsx
index d93a6bafa..a7241511b 100644
--- a/packages/sn-controls-react/src/fieldcontrols/number.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/number.tsx
@@ -58,6 +58,7 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
       return (
         <>
           <TextField
+            style={{ width: '100%' }}
             autoFocus={props.autoFocus}
             name={props.settings.Name}
             type="text"
diff --git a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
index aa1519438..b127395fa 100644
--- a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
+++ b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
@@ -35,7 +35,10 @@ export interface BrowseViewProps {
 
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
-    grid: {},
+    grid: {
+      margin: '0 auto',
+      maxWidth: '750px',
+    },
     fieldWrapper: {},
     field: {},
     fieldFullWidth: {},
diff --git a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
index c4a675192..70b430281 100644
--- a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
+++ b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
@@ -47,10 +47,13 @@ const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     grid: {
       margin: '0 auto',
+      maxWidth: '750px',
     },
     fieldWrapper: {},
     field: {},
-    fieldFullWidth: {},
+    fieldFullWidth: {
+      width: '100%',
+    },
     actionButtonWrapper: {
       textAlign: 'right',
     },
@@ -168,6 +171,7 @@ export const EditView: React.FC<EditViewProps> = (props) => {
   }, [actionName, schema])
 
   const renderField = (field: { fieldSettings: FieldSetting; actionName: ActionName; controlType: any }) => {
+    field.fieldSettings.DisplayName = field.fieldSettings.DisplayName ?? field.fieldSettings.Name
     const autoFocus = hasInputField.includes(field.controlType.name) && !isAutofocusSet
     const fieldControl = createElement(
       controlMapper.getControlForContentField(props.contentTypeName, field.fieldSettings.Name, actionName),
diff --git a/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
index 663eb748f..2813692cb 100644
--- a/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`Date/Date time field control in edit/new view should set all the props
         "readOnly": true,
         "style": Object {
           "minWidth": "200px",
+          "width": "100%",
         },
       }
     }
diff --git a/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
index c2d3b4c94..ba8d9d761 100644
--- a/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Drop down list field control in edit/new view should set all the props
   style={
     Object {
       "minWidth": "220px",
+      "width": "100%",
     }
   }
 >
diff --git a/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
index cbf517de5..101e14c1e 100644
--- a/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
@@ -53,6 +53,11 @@ exports[`Number field control in edit/new view should set all the props 1`] = `
     onChange={[Function]}
     placeholder="0"
     required={true}
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
     type="text"
     value={7}
   />
diff --git a/packages/sn-editor-react/src/components/menu-bar.tsx b/packages/sn-editor-react/src/components/menu-bar.tsx
index 422b6b164..e545eb5d2 100644
--- a/packages/sn-editor-react/src/components/menu-bar.tsx
+++ b/packages/sn-editor-react/src/components/menu-bar.tsx
@@ -197,20 +197,24 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
         </IconButton>
       </Tooltip>
       <Tooltip title={`${localization.menubar.undo} (Ctrl + Z)`}>
-        <IconButton
-          onClick={() => editor.chain().focus().undo().run()}
-          disabled={!editor.can().undo()}
-          classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
-          <UndoIcon />
-        </IconButton>
+        <span>
+          <IconButton
+            onClick={() => editor.chain().focus().undo().run()}
+            disabled={!editor.can().undo()}
+            classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
+            <UndoIcon />
+          </IconButton>
+        </span>
       </Tooltip>
       <Tooltip title={`${localization.menubar.redo} (Ctrl + Y)`}>
-        <IconButton
-          onClick={() => editor.chain().focus().redo().run()}
-          disabled={!editor.can().redo()}
-          classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
-          <RedoIcon />
-        </IconButton>
+        <span>
+          <IconButton
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={!editor.can().redo()}
+            classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
+            <RedoIcon />
+          </IconButton>
+        </span>
       </Tooltip>
 
       <HTMLEditorControl