diff --git a/src/components/dashboard/datasets-accordion.js b/src/components/dashboard/datasets-accordion.js
index 88779f25..db954e2a 100644
--- a/src/components/dashboard/datasets-accordion.js
+++ b/src/components/dashboard/datasets-accordion.js
@@ -1,22 +1,34 @@
 import { CodeBlock } from '@/components'
+import { useXarrayDatasetRepr } from '@/lib/endpoints'
 import { AddIcon, MinusIcon } from '@chakra-ui/icons'
 import {
   Accordion,
   AccordionButton,
   AccordionItem,
   AccordionPanel,
+  Alert,
+  AlertIcon,
   Box,
+  Skeleton,
 } from '@chakra-ui/react'
-import React from 'react'
 
 export const DatasetCard = ({ dataset }) => {
   const parts = dataset.split('/')
   const name = parts[parts.length - 1]
+  const { repr, reprError, isLoading } = useXarrayDatasetRepr(dataset)
+
+  if (reprError)
+    return (
+      <Alert status='error' align='center' justifyContent='center'>
+        <AlertIcon />
+        {`Status Code: ${reprError.status}`} - {reprError.info?.detail}
+      </Alert>
+    )
   const code = `import xarray as xr
 
 store = '${dataset}'
 ds = xr.open_dataset(store, engine='zarr', chunks={})
-print(ds)`
+ds`
   return (
     <AccordionItem>
       {({ isExpanded }) => (
@@ -37,6 +49,11 @@ print(ds)`
             <CodeBlock showLineNumbers language={'python'}>
               {code}
             </CodeBlock>
+            <Skeleton isLoaded={!isLoading}>
+              <Box>
+                <div dangerouslySetInnerHTML={{ __html: repr }} />
+              </Box>
+            </Skeleton>
           </AccordionPanel>
         </>
       )}
diff --git a/src/lib/endpoints.js b/src/lib/endpoints.js
index e3bca3a9..23544fbf 100644
--- a/src/lib/endpoints.js
+++ b/src/lib/endpoints.js
@@ -152,3 +152,17 @@ export const usePrefect = (id, active = true) => {
     isLoading: !data && !error,
   }
 }
+
+export const useXarrayDatasetRepr = (url) => {
+  const reprEndpoint = 'https://html-reprs.fly.dev'
+  const { data, error } = useSWR(
+    url ? `${reprEndpoint}/xarray/?url=${url}` : null,
+    jsonFetcher,
+    { dedupingInterval: defaultDedupingInterval },
+  )
+  return {
+    repr: data?.html,
+    reprError: error,
+    isLoading: !data && !error,
+  }
+}
diff --git a/src/pages/api/prefect/[id].js b/src/pages/api/prefect/[id].js
index df035a3e..70e36220 100644
--- a/src/pages/api/prefect/[id].js
+++ b/src/pages/api/prefect/[id].js
@@ -54,7 +54,6 @@ export default async function handler(req, res) {
     const result = await client.query({ query: QUERY, variables: { name } })
     res.status(200).json(result)
   } catch (err) {
-    console.log(err)
     res.status(500).json(JSON.stringify(err))
   }
 }