diff --git a/.gitignore b/.gitignore
index 65ac67b9..f65d00b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 yarn.lock
 package-lock.json
-public/
+
 
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
diff --git a/package.json b/package.json
index 6bfa9054..524f315e 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "license": "Apache 2.0",
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/next-js": "^2.2.0",
     "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.13.3",
diff --git a/public/cards/cubed-xarray.png b/public/cards/cubed-xarray.png
index 29a1cb86..a5851d80 100644
Binary files a/public/cards/cubed-xarray.png and b/public/cards/cubed-xarray.png differ
diff --git a/public/cards/cupy-tutorial.png b/public/cards/cupy-tutorial.png
index a601570d..4211211a 100644
Binary files a/public/cards/cupy-tutorial.png and b/public/cards/cupy-tutorial.png differ
diff --git a/public/cards/czi-eoss-grant-conclusion.png b/public/cards/czi-eoss-grant-conclusion.png
index d589828c..5d827342 100644
Binary files a/public/cards/czi-eoss-grant-conclusion.png and b/public/cards/czi-eoss-grant-conclusion.png differ
diff --git a/public/cards/flox.png b/public/cards/flox.png
index 618302f7..e32f9169 100644
Binary files a/public/cards/flox.png and b/public/cards/flox.png differ
diff --git a/public/cards/introducing-inference-data.png b/public/cards/introducing-inference-data.png
index 292cbffb..35450571 100644
Binary files a/public/cards/introducing-inference-data.png and b/public/cards/introducing-inference-data.png differ
diff --git a/public/cards/introducing-pint-xarray.png b/public/cards/introducing-pint-xarray.png
index e8ec2d66..28fd2d13 100644
Binary files a/public/cards/introducing-pint-xarray.png and b/public/cards/introducing-pint-xarray.png differ
diff --git a/public/cards/introducing-xradar.png b/public/cards/introducing-xradar.png
index 1b3d8d67..c63ea3fa 100644
Binary files a/public/cards/introducing-xradar.png and b/public/cards/introducing-xradar.png differ
diff --git a/public/cards/introducing-xwrf.png b/public/cards/introducing-xwrf.png
index e5a28d30..b3995b1b 100644
Binary files a/public/cards/introducing-xwrf.png and b/public/cards/introducing-xwrf.png differ
diff --git a/public/cards/multiple-groupers.png b/public/cards/multiple-groupers.png
new file mode 100644
index 00000000..a8e5b14b
Binary files /dev/null and b/public/cards/multiple-groupers.png differ
diff --git a/public/cards/pangeo-ml-ecosystem-2023.png b/public/cards/pangeo-ml-ecosystem-2023.png
index a571461f..01b04543 100644
Binary files a/public/cards/pangeo-ml-ecosystem-2023.png and b/public/cards/pangeo-ml-ecosystem-2023.png differ
diff --git a/public/cards/siparcs-2022.png b/public/cards/siparcs-2022.png
index c4c17fb9..b10f280e 100644
Binary files a/public/cards/siparcs-2022.png and b/public/cards/siparcs-2022.png differ
diff --git a/public/cards/xarray-for-neurophysiology.png b/public/cards/xarray-for-neurophysiology.png
index 6e9ac2ef..e08bee59 100644
Binary files a/public/cards/xarray-for-neurophysiology.png and b/public/cards/xarray-for-neurophysiology.png differ
diff --git a/public/cards/xarray-kvikio.png b/public/cards/xarray-kvikio.png
index 15e1d765..40ab4790 100644
Binary files a/public/cards/xarray-kvikio.png and b/public/cards/xarray-kvikio.png differ
diff --git a/public/cards/xarray-tutorial.png b/public/cards/xarray-tutorial.png
new file mode 100644
index 00000000..01e4c62d
Binary files /dev/null and b/public/cards/xarray-tutorial.png differ
diff --git a/src/components/layout.js b/src/components/layout.js
index 9cfc00ac..cf94bc72 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -13,13 +13,22 @@ export const Layout = ({
   url = 'https://xarray.dev',
   enableBanner = false,
 }) => {
-  const bannerTitle = 'Xarray’s 2024 User Survey is live now.'
+  const bannerTitle = "Xarray's 2024 User Survey is live now."
   const bannerDescription = ''
   const bannerChildren = (
     <Link href='https://forms.gle/KEq7WviCdz9xTaJX6'>
       Please take ~5 minutes to fill it out and help us improve Xarray.
     </Link>
   )
+
+  // Determine the base URL based on the environment
+  const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+    : 'http://localhost:3000'
+
+  // Construct the full card URL
+  const fullCardUrl = card.startsWith('http') ? card : `${baseUrl}${card}`
+
   return (
     <>
       <Head>
@@ -27,11 +36,11 @@ export const Layout = ({
         <meta content='width=device-width, initial-scale=1' name='viewport' />
         <meta property='og:title' content={title} />
         <meta property='og:description' content={description} />
-        <meta property='og:image' content={card} />
+        <meta property='og:image' content={fullCardUrl} />
         <meta property='og:url' content={url} />
         <meta name='twitter:title' content={title} />
         <meta name='twitter:description' content={description} />
-        <meta name='twitter:image' content={card} />
+        <meta name='twitter:image' content={fullCardUrl} />
         <meta name='twitter:card' content='summary_large_image' />
         <meta name='twitter:site' content='@xarray_dev' />
         <link
diff --git a/src/pages/blog/[id].js b/src/pages/blog/[id].js
index bf3b840c..ce077d9a 100644
--- a/src/pages/blog/[id].js
+++ b/src/pages/blog/[id].js
@@ -29,18 +29,15 @@ import { distanceToNow, formatDate } from '@/lib/date-formatting'
 import { MDXElements } from '@/lib/mdx-elements'
 import { getAllPostsIds, getPostData } from '@/lib/posts'
 
-const CARDS_BASE_URL = 'https://xarray.dev/cards'
-
 export default function Post({ source, frontmatter, postId }) {
-  const card = `${CARDS_BASE_URL}/${postId}.png`
   const date = new Date(frontmatter.date)
 
   return (
     <Layout
       title={`${frontmatter.title}`}
-      card={card}
+      card={`/cards/${postId}.png`}
       description={frontmatter.summary}
-      url={`https://xarray.dev/blog/${postId}`}
+      url={`/blog/${postId}`}
     >
       <Box as={'section'}>
         <Container maxW='container.lg' py={10}>
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js
index b1b3acce..e28a3ffb 100644
--- a/src/pages/blog/index.js
+++ b/src/pages/blog/index.js
@@ -72,7 +72,7 @@ export default function Blog({ allPostsData }) {
   return (
     <Layout
       title={'Blog | Xarray'}
-      url={'https://xarray.dev/blog'}
+      url={`/blog`}
       card={
         'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/Xarray-assets/Icon/Xarray_Icon_Final.png'
       }
diff --git a/src/pages/cards/[id].js b/src/pages/cards/[id].js
index 28962003..d8896762 100644
--- a/src/pages/cards/[id].js
+++ b/src/pages/cards/[id].js
@@ -1,6 +1,4 @@
 import { Image } from '@/components/mdx'
-import { MdOutlineCalendarToday, MdPeopleOutline } from 'react-icons/md'
-
 import { formatDate } from '@/lib/date-formatting'
 import { getAllPostsIds, getPostData } from '@/lib/posts'
 import {
@@ -11,71 +9,73 @@ import {
   Flex,
   Heading,
   Icon,
-  Stack,
   Text,
+  VStack,
 } from '@chakra-ui/react'
 import fs from 'fs'
 import matter from 'gray-matter'
 import path from 'path'
+import { MdOutlineCalendarToday, MdPeopleOutline } from 'react-icons/md'
 
 const Card = ({ frontmatter, id }) => {
-  const boxBackground = 'teal.100'
   const date = new Date(frontmatter.date)
 
   return (
-    <Box
-      sx={{ bg: boxBackground, color: 'invert' }}
-      h={'100vh'}
-      w={'100vw'}
-      backgroundImage={'/background.svg'}
-    >
-      <Container id='post' maxW={'container.lg'} centerContent>
-        <Flex direction='column' fontSize={'2xl'}>
-          <Stack direction={'row'} spacing={8} justify='space-between'>
-            <Stack>
-              <Text my={32} fontWeight={'bold'} opacity={0.7}>
-                xarray.dev / blog
-              </Text>
-            </Stack>
+    <Box bg='teal.100' minH='100vh' w='100vw'>
+      <Container maxW='container.lg' h='100%' py={12}>
+        <Flex direction='column' h='100%' justify='center'>
+          <Flex justifyContent='space-between' alignItems='flex-start' mb={6}>
+            <Text fontSize='xl' color='gray.700' fontWeight='medium'>
+              xarray.dev / blog
+            </Text>
+            <Image
+              w='150px'
+              h='auto'
+              objectFit='contain'
+              src='/Xarray-assets/RGB/Xarray_Logo_RGB_Final.svg'
+              alt='xarray logo'
+            />
+          </Flex>
+
+          <VStack align='stretch' spacing={16} my={12}>
+            <Heading as='h1' size='3xl' fontWeight='bold' lineHeight='1.2'>
+              {frontmatter.title}
+            </Heading>
+
             <Flex
-              direction={'row'}
-              alignItems={'center'}
-              justify={'right'}
-              align={'right'}
+              direction={['column', 'row']}
+              justify='space-between'
+              align={['flex-start', 'center']}
+              wrap='wrap'
+              gap={4}
             >
-              <Image
-                justify={'right'}
-                align={'right'}
-                w={'200px'}
-                src={'/Xarray-assets/RGB/Xarray_Logo_RGB_Final.svg'}
-                alt={'xarray logo'}
-              />
+              <Flex align='center'>
+                <Icon
+                  as={MdOutlineCalendarToday}
+                  w={6}
+                  h={6}
+                  mr={2}
+                  color='gray.700'
+                />
+                <Text fontSize='lg' fontWeight='medium'>
+                  {formatDate(date)}
+                </Text>
+              </Flex>
             </Flex>
-          </Stack>
-          <Heading as={'h1'} size={'2xl'} my={8}>
-            {frontmatter.title}
-          </Heading>
 
-          <Stack direction={'row'} my={4} align={'center'}>
-            <Icon as={MdOutlineCalendarToday} w='8' h='8' />
-            <Text fontWeight={'bold'}>{formatDate(date)}</Text>
-          </Stack>
-
-          <Stack direction={'row'} my={8} align={'center'}>
-            <Icon as={MdPeopleOutline} w='8' h='8' />
-
-            <AvatarGroup size={'xl'}>
-              {frontmatter.authors.map((author) => {
-                return (
+            <Flex align='center'>
+              <Icon as={MdPeopleOutline} w={6} h={6} mr={2} color='gray.700' />
+              <AvatarGroup size='xl' max={5} spacing='-0.75rem'>
+                {frontmatter.authors.map((author) => (
                   <Avatar
                     key={author.name}
-                    src={`https://github.com/${author.github}.png`}
                     name={author.name}
+                    src={`https://github.com/${author.github}.png`}
                   />
-                )
-              })}
-            </AvatarGroup>
-          </Stack>
+                ))}
+              </AvatarGroup>
+            </Flex>
+          </VStack>
         </Flex>
       </Container>
     </Box>
diff --git a/src/pages/dashboard.js b/src/pages/dashboard.js
index c6d997a4..66068f5a 100644
--- a/src/pages/dashboard.js
+++ b/src/pages/dashboard.js
@@ -5,7 +5,7 @@ const DashboardPage = () => {
   return (
     <Layout
       title={'Xarray project statistics'}
-      url={'https://xarray.dev/dashboard'}
+      url={`/dashboard`}
       description={'Xarray project statistics'}
       card={
         'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/Xarray-assets/Icon/Xarray_Icon_Final.png'
diff --git a/src/pages/index.js b/src/pages/index.js
index cc49cc1a..fa46529f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -12,6 +12,7 @@ import { Layout } from '@/components/layout'
 export default function IndexPage() {
   return (
     <Layout
+      url={`/`}
       title={'Xarray: N-D labeled arrays and datasets in Python'}
       card={
         'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/Xarray-assets/Icon/Xarray_Icon_Final.png'
diff --git a/src/pages/team.js b/src/pages/team.js
index 03a30342..e2d748fd 100644
--- a/src/pages/team.js
+++ b/src/pages/team.js
@@ -6,7 +6,13 @@ import { Box, Container, Heading, SimpleGrid, Text } from '@chakra-ui/react'
 
 const Team = () => {
   return (
-    <Layout title={'Xarray Contributors'}>
+    <Layout
+      title={'Xarray Contributors'}
+      card={
+        'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/Xarray-assets/Icon/Xarray_Icon_Final.png'
+      }
+      url={`/team`}
+    >
       <Box as='section' py={20}>
         <Container maxW='container.lg'>
           <Heading as='h1' size='2xl' textAlign={'center'}>