diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index c5d95758..76df5278 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -5,6 +5,7 @@ import {
   AvatarGroup,
   Button,
   Callout,
+  DataTable,
   DatePicker,
   Dialog,
   DropdownMenu,
@@ -1957,6 +1958,107 @@ const Page = () => {
             </Flex>
           </Flex>
 
+          <Text
+            size='large'
+            weight='medium'
+            style={{ marginTop: '32px', marginBottom: '16px' }}
+          >
+            DataTable Examples
+          </Text>
+
+          <Flex direction='column' gap={6}>
+            <Flex direction='column' gap={3}>
+              <DataTable
+                data={[
+                  {
+                    id: '1',
+                    name: 'John Doe',
+                    email: 'john@example.com',
+                    role: 'Admin'
+                  },
+                  {
+                    id: '2',
+                    name: 'Jane Smith',
+                    email: 'jane@example.com',
+                    role: 'User'
+                  },
+                  {
+                    id: '3',
+                    name: 'Bob Johnson',
+                    email: 'bob@example.com',
+                    role: 'User'
+                  }
+                ]}
+                columns={[
+                  {
+                    accessorKey: 'name',
+                    header: 'Name',
+                    enableColumnFilter: true
+                  },
+                  {
+                    accessorKey: 'email',
+                    header: 'Email',
+                    enableColumnFilter: true
+                  },
+                  {
+                    accessorKey: 'role',
+                    header: 'Role',
+                    enableColumnFilter: true
+                  }
+                ]}
+                mode='client'
+                defaultSort={{ name: 'name', order: 'asc' }}
+              >
+                <DataTable.Toolbar />
+                <DataTable.Content
+                  emptyState={
+                    <EmptyState
+                      icon={<FilterIcon />}
+                      heading='No users found'
+                      subHeading="We couldn't find any matches for that keyword or filter. Try alternative terms or check for typos."
+                    />
+                  }
+                />
+              </DataTable>
+            </Flex>
+
+            <Flex direction='column' gap={3}>
+              <DataTable
+                data={[]}
+                columns={[
+                  {
+                    accessorKey: 'name',
+                    header: 'Name',
+                    enableColumnFilter: true
+                  },
+                  {
+                    accessorKey: 'email',
+                    header: 'Email',
+                    enableColumnFilter: true
+                  },
+                  {
+                    accessorKey: 'role',
+                    header: 'Role',
+                    enableColumnFilter: true
+                  }
+                ]}
+                mode='client'
+                defaultSort={{ name: 'name', order: 'asc' }}
+              >
+                <DataTable.Toolbar />
+                <DataTable.Content
+                  emptyState={
+                    <EmptyState
+                      icon={<FilterIcon />}
+                      heading='No users found'
+                      subHeading="We couldn't find any matches for that keyword or filter. Try alternative terms or check for typos."
+                    />
+                  }
+                />
+              </DataTable>
+            </Flex>
+          </Flex>
+
           <Flex justify='center' style={{ marginTop: 40 }}>
             <Button type='submit'>Submit button</Button>
           </Flex>
diff --git a/packages/raystack/components/data-table/components/content.tsx b/packages/raystack/components/data-table/components/content.tsx
index 703b6895..605a7eb5 100644
--- a/packages/raystack/components/data-table/components/content.tsx
+++ b/packages/raystack/components/data-table/components/content.tsx
@@ -218,12 +218,16 @@ export function Content({
 
   const visibleColumnsLength = table.getVisibleLeafColumns().length;
 
+  const hasData = rows?.length > 0 || isLoading;
+
   return (
     <div className={classNames.root}>
       <Table className={classNames.table}>
-        <Headers headerGroups={headerGroups} className={classNames.header} />
+        {hasData && (
+          <Headers headerGroups={headerGroups} className={classNames.header} />
+        )}
         <Table.Body className={classNames.body}>
-          {rows?.length || isLoading ? (
+          {hasData ? (
             <>
               <Rows
                 rows={rows}
@@ -242,7 +246,10 @@ export function Content({
             </>
           ) : (
             <Table.Row>
-              <Table.Cell colSpan={visibleColumnsLength}>
+              <Table.Cell
+                colSpan={visibleColumnsLength}
+                className={styles.emptyStateCell}
+              >
                 {emptyState || <DefaultEmptyComponent />}
               </Table.Cell>
             </Table.Row>
diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index ab013ab3..48599d62 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -60,3 +60,7 @@
 .cell {
   background: inherit;
 }
+
+.emptyStateCell {
+  border-bottom: none;
+}