diff --git a/.gitignore b/.gitignore
index 4a23cb8..e611d8e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
 .next/
 node_modules/
-.env.local
\ No newline at end of file
+.vscode/
+.env.local
diff --git a/components/charts/category-bar.js b/components/charts/category-bar.js
index e20b3e1..98b5620 100644
--- a/components/charts/category-bar.js
+++ b/components/charts/category-bar.js
@@ -1,14 +1,20 @@
-import { Badge, Expander } from '@carbonplan/components'
+import { Badge, Row, Column, Expander } from '@carbonplan/components'
 import { useMemo } from 'react'
 import { Box, Flex } from 'theme-ui'
-import AnimateHeight from 'react-animate-height'
 
 import { COLORS, LABELS } from '../constants'
 import { formatValue } from '../utils'
 
-const CategoryBar = ({ label, total, mapping, expanded, showExpander }) => {
+const CategoryBar = ({
+  label,
+  total,
+  mapping,
+  issuedTotal,
+  expanded,
+  showExpander,
+}) => {
   const background = useMemo(() => {
-    if (Object.keys(mapping).length === 0) {
+    if (Object.keys(mapping).length === 0 || total === 0) {
       return 'muted'
     } else {
       const colors = Object.keys(LABELS.category).map((key) => COLORS[key])
@@ -18,7 +24,7 @@ const CategoryBar = ({ label, total, mapping, expanded, showExpander }) => {
           if (typeof mapValue !== 'number') {
             mapValue = 0
           }
-          let value = (mapValue / total) * 100
+          let value = (mapValue / (issuedTotal ?? total)) * 100
           if (accum[i - 1]) {
             value = value + accum[i - 1]
           }
@@ -27,6 +33,10 @@ const CategoryBar = ({ label, total, mapping, expanded, showExpander }) => {
         },
         []
       )
+      if (issuedTotal) {
+        colors.push('muted')
+        percentages.push(100)
+      }
 
       return (theme) =>
         `linear-gradient(to right, ${percentages
@@ -36,101 +46,73 @@ const CategoryBar = ({ label, total, mapping, expanded, showExpander }) => {
           })
           .join(', ')})`
     }
-  }, [total, mapping])
+  }, [total, issuedTotal, mapping])
 
   const isEmpty = Object.keys(mapping).length === 0
 
   return (
-    <Box sx={{ mt: [3, 3, '56px', '56px'], mb: 6 }}>
-      <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
-        <Box
+    <>
+      <Row columns={[6, 8, 8, 8]}>
+        <Column
+          start={1}
+          width={8}
+          sx={{ mt: [!showExpander ? 5 : 0, 0, 0, 0] }} //add space when stacked
+        >
+          <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
+            <Box
+              sx={{
+                fontSize: 1,
+                fontFamily: 'mono',
+                letterSpacing: 'mono',
+                color: 'secondary',
+              }}
+            >
+              {label}
+            </Box>
+            <Badge sx={{ fontSize: 4, height: ['34px'], px: 1, mb: '-2px' }}>
+              {isEmpty ? '-' : formatValue(total)}
+            </Badge>
+          </Flex>
+        </Column>
+      </Row>
+      <Row
+        columns={1}
+        sx={{
+          mt: 5,
+        }}
+      >
+        <Column
+          start={1}
+          width={8}
           sx={{
-            fontSize: 1,
-            fontFamily: 'mono',
-            letterSpacing: 'mono',
-            color: 'secondary',
+            display: 'flex',
+            alignItems: 'center',
           }}
         >
-          {label}
-        </Box>
-        <Badge sx={{ fontSize: 4, height: ['34px'], px: 1, mb: '-2px' }}>
-          {isEmpty ? '-' : formatValue(total)}
-        </Badge>
-      </Flex>
-
-      <Box sx={{ mt: [4, '38px', '38px', '38px'], position: 'relative' }}>
-        {showExpander && (
-          <Expander
-            id='expander'
-            value={expanded}
+          {showExpander && (
+            <Expander
+              value={expanded}
+              id='expander'
+              sx={{
+                display: ['none', 'block', 'block', 'block'],
+                ml: [-3, -4, -5, -5],
+                width: [18, 22, 22, 22],
+                position: 'absolute',
+                mt: 1,
+              }}
+            />
+          )}
+          <Box
             sx={{
-              position: 'absolute',
-              left: '-22px',
-              top: '3px',
-              width: '18px',
-              height: '18px',
+              width: '100%',
+              height: '28px',
+              transition: 'background 0.2s',
+              background,
             }}
           />
-        )}
-
-        <Box
-          sx={{
-            width: '100%',
-            height: '28px',
-            transition: 'background 0.2s',
-            background,
-          }}
-        />
-      </Box>
-
-      <AnimateHeight
-        duration={100}
-        height={expanded ? 'auto' : 0}
-        easing={'linear'}
-      >
-        <Box sx={{ mt: 3 }}>
-          {Object.keys(LABELS.category).map((l) => (
-            <Box key={l} sx={{ mb: 2 }}>
-              <Flex
-                sx={{
-                  justifyContent: 'space-between',
-                  alignItems: 'flex-end',
-                  fontSize: 1,
-                  mb: 2,
-                }}
-              >
-                <Flex sx={{ gap: 2, alignItems: 'center' }}>
-                  <Box
-                    sx={{
-                      width: '8px',
-                      height: '8px',
-                      backgroundColor: COLORS[l],
-                    }}
-                  />
-                  {LABELS.category[l]}
-                </Flex>
-                <Badge>{isEmpty ? '-' : formatValue(mapping[l] ?? 0)}</Badge>
-              </Flex>
-              <Box
-                sx={{
-                  height: '5px',
-                  width: '100%',
-                  transition: 'background 0.2s',
-                  background: isEmpty
-                    ? 'muted'
-                    : (theme) =>
-                        `linear-gradient(to right, ${
-                          theme.colors[COLORS[l]]
-                        } 0% ${((mapping[l] ?? 0) / total) * 100}%, ${
-                          theme.colors.muted
-                        } ${((mapping[l] ?? 0) / total) * 100}% 100%)`,
-                }}
-              />
-            </Box>
-          ))}
-        </Box>
-      </AnimateHeight>
-    </Box>
+        </Column>
+      </Row>
+    </>
   )
 }
 
diff --git a/components/charts/detail-charts.js b/components/charts/detail-charts.js
new file mode 100644
index 0000000..12e37ed
--- /dev/null
+++ b/components/charts/detail-charts.js
@@ -0,0 +1,132 @@
+import { useState, useEffect } from 'react'
+import { Box, Flex, Badge } from 'theme-ui'
+import { Row, Column } from '@carbonplan/components'
+import { alpha } from '@theme-ui/color'
+import { COLORS, LABELS } from '../constants'
+import { formatValue } from '../utils'
+
+const DetailCharts = ({ issued, retired, isLoading, error }) => {
+  const [previousCategories, setPreviousCategories] = useState([])
+
+  useEffect(() => {
+    if (!isLoading && !error) {
+      setPreviousCategories(Object.keys(issued.mapping))
+    }
+  }, [isLoading, error])
+
+  const createGradient = (theme, l, isRetired) => {
+    const percent = ((issued.mapping[l] ?? 0) / issued.total) * 100
+    const retiredPercent = isRetired
+      ? ((retired.mapping[l] ?? 0) / issued.total) * 100
+      : percent
+
+    if (isRetired) {
+      return `linear-gradient(to right, 
+            ${theme.rawColors[COLORS[l]]} 0%, 
+            ${theme.rawColors[COLORS[l]]} ${retiredPercent}%,
+            ${alpha(
+              theme.rawColors[COLORS[l]],
+              0.3
+            )(theme)} ${retiredPercent}%, 
+            ${alpha(theme.rawColors[COLORS[l]], 0.3)(theme)} ${percent}%,
+            ${theme.colors.muted} ${percent}%, 
+            ${theme.colors.muted} 100%)`
+    } else {
+      return `linear-gradient(to right, ${
+        theme.colors[COLORS[l]]
+      } 0% ${percent}%, ${theme.colors.muted} ${percent}% 100%)`
+    }
+  }
+  const chartColumn = (isRetired) => {
+    const categoryKeys =
+      isLoading || error
+        ? previousCategories
+        : Object.keys(LABELS.category).filter((l) => Boolean(issued.mapping[l]))
+
+    return (
+      <Column
+        start={[
+          isRetired ? 4 : 1,
+          isRetired ? 5 : 1,
+          isRetired ? 5 : 1,
+          isRetired ? 5 : 1,
+        ]}
+        width={[3, 4, 4, 4]}
+      >
+        {categoryKeys.map((l) => (
+          <Box key={l} sx={{ mb: 2 }}>
+            <Flex
+              sx={{
+                justifyContent: 'space-between',
+                fontSize: 2,
+                mb: 1,
+              }}
+            >
+              {isLoading || error ? (
+                <Flex sx={{ gap: 2, alignItems: 'center' }}>
+                  <Box
+                    sx={{
+                      width: '8px',
+                      height: '8px',
+                      backgroundColor: 'muted',
+                    }}
+                  />
+                  <Box sx={{ fontSize: 1, color: 'muted' }}>----</Box>
+                </Flex>
+              ) : (
+                <Flex sx={{ gap: 2, alignItems: 'center' }}>
+                  <Box
+                    sx={{
+                      width: '8px',
+                      height: '8px',
+                      backgroundColor: COLORS[l],
+                    }}
+                  />
+                  <Box sx={{ fontSize: 1 }}>{LABELS.category[l]}</Box>
+                </Flex>
+              )}
+
+              <Badge
+                sx={{
+                  color: isLoading || error ? 'primary' : COLORS[l],
+                  backgroundColor:
+                    isLoading || error ? 'muted' : alpha(COLORS[l], 0.3),
+                  fontSize: 2,
+                  mb: '3px',
+                }}
+              >
+                {isLoading || error
+                  ? '-'
+                  : formatValue(
+                      isRetired ? retired.mapping[l] : issued.mapping[l]
+                    ) ?? 0}
+              </Badge>
+            </Flex>
+            <Box
+              sx={{
+                height: '5px',
+                width: '100%',
+                transition: 'background 0.2s',
+                background:
+                  isLoading || error
+                    ? 'muted'
+                    : (theme) => createGradient(theme, l, isRetired),
+              }}
+            />
+          </Box>
+        ))}
+      </Column>
+    )
+  }
+
+  return (
+    <>
+      <Row columns={[6, 8, 8, 8]} sx={{ mb: 5 }}>
+        {chartColumn(false)}
+        {chartColumn(true)}
+      </Row>
+    </>
+  )
+}
+
+export default DetailCharts
diff --git a/components/charts/project-charts.js b/components/charts/project-charts.js
index 605c192..a7a3dab 100644
--- a/components/charts/project-charts.js
+++ b/components/charts/project-charts.js
@@ -1,9 +1,11 @@
-import { Column, Row } from '@carbonplan/components'
+import { Row, Column } from '@carbonplan/components'
 import { useMemo, useState } from 'react'
+import AnimateHeight from 'react-animate-height'
 
 import { LABELS } from '../constants'
 import useFetcher from '../use-fetcher'
 import CategoryBar from './category-bar'
+import DetailCharts from './detail-charts'
 
 const ProjectCharts = () => {
   const [expanded, setExpanded] = useState(false)
@@ -41,6 +43,7 @@ const ProjectCharts = () => {
           retired: {
             total: prevRetired.total + retired,
             mapping: prevRetired.mapping,
+            issuedTotal: prevIssued.total + issued,
           },
         }
       },
@@ -48,33 +51,73 @@ const ProjectCharts = () => {
     )
   }, [data])
 
+  const issuedKeys = Object.keys(issued.mapping)
+
   return (
-    <Row
-      onClick={() => setExpanded(!expanded)}
-      columns={[6, 8, 8, 8]}
-      sx={{
-        color: 'primary',
-        fontFamily: 'mono',
-        letterSpacing: 'mono',
-        textTransform: 'uppercase',
-        cursor: 'pointer',
-        '&:hover #expander': {
-          stroke: 'primary',
-        },
-      }}
-    >
-      <Column start={1} width={[6, 4, 4, 4]}>
-        <CategoryBar
-          label='Credits issued'
-          {...issued}
-          expanded={expanded}
-          showExpander={true}
-        />
-      </Column>
-      <Column start={[1, 5, 5, 5]} width={[6, 4, 4, 4]}>
-        <CategoryBar label='Credits retired' {...retired} expanded={expanded} />
-      </Column>
-    </Row>
+    <>
+      <Row
+        columns={[6, 8, 8, 8]}
+        onClick={() => {
+          if (issuedKeys.length) {
+            setExpanded(!expanded)
+          }
+        }}
+        sx={{
+          '&:hover #expander': {
+            stroke: 'primary',
+          },
+          cursor: issuedKeys.length ? 'pointer' : null,
+          color: 'primary',
+          fontFamily: 'mono',
+          letterSpacing: 'mono',
+          textTransform: 'uppercase',
+          mt: [5, 5, 7, 7],
+          mb: 3,
+        }}
+      >
+        <Column start={1} width={[6, 4, 4, 4]}>
+          <CategoryBar
+            label='Credits issued'
+            {...issued}
+            expanded={expanded}
+            showExpander={issuedKeys.length > 0}
+          />
+        </Column>
+        <Column start={[1, 5, 5, 5]} width={[6, 4, 4, 4]}>
+          <CategoryBar
+            label='Credits retired'
+            {...retired}
+            expanded={expanded}
+          />
+        </Column>
+      </Row>
+      <Row
+        columns={1}
+        sx={{
+          display: ['none', 'block', 'block', 'block'],
+          '&:hover #expander': {
+            stroke: 'primary',
+          },
+          color: 'primary',
+          fontFamily: 'mono',
+          letterSpacing: 'mono',
+          textTransform: 'uppercase',
+        }}
+      >
+        <AnimateHeight
+          duration={100}
+          height={expanded ? 'auto' : 0}
+          easing={'linear'}
+        >
+          <DetailCharts
+            retired={retired}
+            issued={issued}
+            isLoading={isLoading}
+            error={error}
+          />
+        </AnimateHeight>
+      </Row>
+    </>
   )
 }
 
diff --git a/components/layout.js b/components/layout.js
index f8343a3..67ea15a 100644
--- a/components/layout.js
+++ b/components/layout.js
@@ -8,7 +8,7 @@ const Layout = ({ sidebar, children }) => {
       <Column start={[1, 1, 5, 5]} width={[6, 8, 8, 8]}>
         <Divider
           sx={{
-            display: ['none', 'inherit', 'none', 'none'],
+            display: ['inherit', 'inherit', 'none', 'none'],
             ml: [-4, -5, -5, -6],
             mr: [-4, -5, 0, 0],
             mt: 3,
diff --git a/components/projects.js b/components/projects.js
index 583ba0d..e58aeca 100644
--- a/components/projects.js
+++ b/components/projects.js
@@ -49,10 +49,8 @@ const Projects = () => {
 
   return (
     <>
-      <Box sx={{ display: ['none', 'block', 'block', 'block'] }}>
-        <ProjectCharts />
-      </Box>
-      <Box as='table' sx={{ width: '100%', borderCollapse: 'collapse' }}>
+      <ProjectCharts />
+      <Box as='table' sx={{ width: '100%', borderCollapse: 'collapse', mt: 5 }}>
         <TableHead
           sort={sort}
           setSort={setSort}