diff --git a/aries-site/src/examples/cardPreviews/emptystate.js b/aries-site/src/examples/cardPreviews/emptystate.js
index b53ff6fd0..52d7343b2 100644
--- a/aries-site/src/examples/cardPreviews/emptystate.js
+++ b/aries-site/src/examples/cardPreviews/emptystate.js
@@ -1,18 +1,16 @@
 import React from 'react';
-import { Box, Button, Heading, Paragraph } from 'grommet';
+import { EmptyState } from 'aries-core';
+import { Button } from 'grommet';
 import { CircleInformation } from 'grommet-icons';
 
-export const EmptyStatePreview = () => (
-  <Box gap="small" align="center" flex={false}>
-    <CircleInformation />
-    <Box align="center" gap="xsmall">
-      <Heading margin="none" size='small' level={4}>
-        No items exist
-      </Heading>
-      <Paragraph margin="none" textAlign="center">
-        Error message will be displayed here.
-      </Paragraph>
-    </Box>
-    <Button label="Action item" primary />
-  </Box>
-);
+export const EmptyStatePreview = () => {
+  return (
+    <EmptyState
+      title="Empty state title"
+      description="Empty state message will be displayed here."
+      icon={<CircleInformation />}
+      actions={<Button tabIndex={-1} label="action item" primary />}
+      level={3}
+    />
+  );
+};