diff --git a/gui/src/components/Quantity.js b/gui/src/components/Quantity.js
index cc0024a27a53916ac12d54eff4c3e44b399d16aa..82cad49c6d6f91216228d1f0250ab7874dd1808b 100644
--- a/gui/src/components/Quantity.js
+++ b/gui/src/components/Quantity.js
@@ -328,6 +328,18 @@ Quantity.defaultProps = {
 export default Quantity
 
 // Preset configuration for quantities
+const nElementMap = {
+  1: 'unary',
+  2: 'binary',
+  3: 'ternary',
+  4: 'quaternary',
+  5: 'quinary',
+  6: 'sexinary',
+  7: 'septenary',
+  8: 'octanary',
+  9: 'nonary',
+  10: 'decimary'
+}
 const quantityPresets = {
   datasets: {
     label: 'datasets',
@@ -435,6 +447,15 @@ const quantityPresets = {
         : null
     }
   },
+  'results.material.n_elements': {
+    noWrap: true,
+    label: "number of elements",
+    render: (data) => {
+      const n = get(data, 'results.material.n_elements')
+      const label = nElementMap[n]
+      return <Typography noWrap>{`${n}${label ? ` (${label})` : ''}`}</Typography>
+    }
+  },
   mainfile: {
     noWrap: true,
     ellipsisFront: true,
diff --git a/gui/src/components/entry/OverviewView.js b/gui/src/components/entry/OverviewView.js
index 3109f38870fb3ee9fab81bde0539ae47db738b7a..9b927d15e9751ba139ca679654810a6d8bde2b3d 100644
--- a/gui/src/components/entry/OverviewView.js
+++ b/gui/src/components/entry/OverviewView.js
@@ -26,6 +26,7 @@ import ElectronicPropertiesCard from '../entry/properties/ElectronicPropertiesCa
 import SolarCellPropertiesCard from '../entry/properties/SolarCellPropertiesCard'
 import MaterialCard from '../entry/properties/MaterialCard'
 import MaterialCardTopology from '../entry/properties/MaterialCardTopology'
+import MaterialCardFormula from './properties/MaterialCardFormula'
 import NexusCard from './properties/NexusCard'
 import VibrationalPropertiesCard from '../entry/properties/VibrationalPropertiesCard'
 import MechanicalPropertiesCard from '../entry/properties/MechanicalPropertiesCard'
@@ -169,7 +170,9 @@ const OverviewView = React.memo(() => {
       nexus: NexusCard,
       material: index?.results?.material?.topology
         ? MaterialCardTopology
-        : MaterialCard,
+        : index?.results?.properties?.structures
+          ? MaterialCard
+          : MaterialCardFormula,
       electronic: ElectronicPropertiesCard,
       solarcell: SolarCellPropertiesCard,
       vibrational: VibrationalPropertiesCard,
diff --git a/gui/src/components/entry/properties/MaterialCard.js b/gui/src/components/entry/properties/MaterialCard.js
index 25ffa690c167f3cf428bc224bf2f954e01e88f6c..fd111551417c19ec250a856fabee97682d0a3cc6 100644
--- a/gui/src/components/entry/properties/MaterialCard.js
+++ b/gui/src/components/entry/properties/MaterialCard.js
@@ -17,14 +17,13 @@
  */
 import React, { useCallback, useState } from 'react'
 import PropTypes from 'prop-types'
-import { get, capitalize, isEmpty } from 'lodash'
+import { capitalize, isEmpty } from 'lodash'
 import { Select, FormControl, MenuItem } from '@material-ui/core'
 import { PropertyCard, PropertyGrid, PropertyItem, PropertyCardActions } from './PropertyCard'
 import Quantity, { QuantityTable, QuantityRow, QuantityCell } from '../../Quantity'
 import { MaterialButton } from '../../nav/Routes'
 import Structure, { toMateriaStructure } from '../../visualization/Structure'
 import NoData from '../../visualization/NoData'
-import searchQuantities from '../../../searchQuantities'
 import { encyclopediaBase, guiBase } from '../../../config'
 
 /**
@@ -54,18 +53,6 @@ Formula.propTypes = {
 /**
  * Displays a summary of material related properties for an entry.
  */
-const nElementMap = {
-  1: 'unary',
-  2: 'binary',
-  3: 'ternary',
-  4: 'quaternary',
-  5: 'quinary',
-  6: 'sexinary',
-  7: 'septenary',
-  8: 'octanary',
-  9: 'nonary',
-  10: 'decimary'
-}
 const MaterialCard = React.memo(({index, properties, archive}) => {
   // Find out which properties are present
   const structures = index?.results?.properties?.structures
@@ -143,15 +130,7 @@ const MaterialCard = React.memo(({index, properties, archive}) => {
             <QuantityCell quantity="results.material.elements" colSpan={2}/>
           </QuantityRow>
           <QuantityRow>
-            <QuantityCell
-              label="number of elements"
-              description={searchQuantities['results.material.n_elements']?.description}
-              quantity={(data) => {
-                const n = get(data, 'results.material.n_elements')
-                const label = nElementMap[n]
-                return `${n}${label ? ` (${label})` : ''}`
-              }}
-            />
+            <QuantityCell quantity="results.material.n_elements"/>
           </QuantityRow>
         </QuantityTable>
       </PropertyItem>
diff --git a/gui/src/components/entry/properties/MaterialCardFormula.js b/gui/src/components/entry/properties/MaterialCardFormula.js
new file mode 100644
index 0000000000000000000000000000000000000000..a0c5ac807bdc929bee28d68a9aeb32dc158ca155
--- /dev/null
+++ b/gui/src/components/entry/properties/MaterialCardFormula.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright The NOMAD Authors.
+ *
+ * This file is part of NOMAD. See https://nomad-lab.eu for further info.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import { PropertyCard, PropertyGrid, PropertyItem } from './PropertyCard'
+import { QuantityTable, QuantityRow, QuantityCell } from '../../Quantity'
+
+/**
+ * Displays a summary of material related properties for an entry.
+ */
+const MaterialCardFormula = React.memo(({index}) => {
+  if (!index?.results?.material) {
+    return null
+  }
+
+  return <PropertyCard title="Material">
+    <PropertyGrid>
+      <PropertyItem title="Composition" xs={12} height="auto">
+        <QuantityTable data={index}>
+          <QuantityRow>
+            <QuantityCell quantity="results.material.chemical_formula_iupac"/>
+            <QuantityCell quantity="results.material.chemical_formula_reduced"/>
+          </QuantityRow>
+          <QuantityRow>
+            <QuantityCell quantity="results.material.chemical_formula_hill"/>
+            <QuantityCell quantity="results.material.chemical_formula_descriptive"/>
+          </QuantityRow>
+          <QuantityRow>
+            <QuantityCell quantity="results.material.elements"/>
+            <QuantityCell quantity="results.material.n_elements"/>
+          </QuantityRow>
+        </QuantityTable>
+      </PropertyItem>
+    </PropertyGrid>
+  </PropertyCard>
+})
+
+MaterialCardFormula.propTypes = {
+  index: PropTypes.object
+}
+
+export default MaterialCardFormula