diff --git a/apps/app/src/components/decisions/EmptyProposalsState.tsx b/apps/app/src/components/decisions/EmptyProposalsState.tsx
deleted file mode 100644
index aaaa03707..000000000
--- a/apps/app/src/components/decisions/EmptyProposalsState.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import { ReactNode } from 'react';
-import { LuLeaf } from 'react-icons/lu';
-
-export function EmptyProposalsState({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex h-full flex-col items-center justify-center gap-4 px-0 py-8">
-      <div className="flex size-10 items-center justify-center rounded-full bg-neutral-gray1">
-        <LuLeaf className="size-6 text-neutral-gray4" />
-      </div>
-      <div className="flex flex-col items-center justify-start gap-6">
-        <div className="flex flex-col items-center justify-start gap-2 text-center">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/app/src/components/decisions/MyBallot.tsx b/apps/app/src/components/decisions/MyBallot.tsx
index ca704b060..f93568f73 100644
--- a/apps/app/src/components/decisions/MyBallot.tsx
+++ b/apps/app/src/components/decisions/MyBallot.tsx
@@ -3,11 +3,12 @@
 import { useUser } from '@/utils/UserProvider';
 import { trpc } from '@op/api/client';
 import { Checkbox } from '@op/ui/Checkbox';
+import { EmptyState } from '@op/ui/EmptyState';
 import { Header3 } from '@op/ui/Header';
+import { LuLeaf } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
 
-import { EmptyProposalsState } from './EmptyProposalsState';
 import {
   ProposalCardContent,
   ProposalCardDescription,
@@ -20,11 +21,11 @@ import { VotingProposalCard } from './VotingProposalCard';
 export const NoVoteFound = () => {
   const t = useTranslations();
   return (
-    <EmptyProposalsState>
+    <EmptyState icon={<LuLeaf className="size-6" />}>
       <Header3 className="font-serif !text-title-base font-light text-neutral-black">
         {t('You did not vote in this process.')}
       </Header3>
-    </EmptyProposalsState>
+    </EmptyState>
   );
 };
 
diff --git a/apps/app/src/components/decisions/ProposalsList.tsx b/apps/app/src/components/decisions/ProposalsList.tsx
index 6059e32ab..c8183a716 100644
--- a/apps/app/src/components/decisions/ProposalsList.tsx
+++ b/apps/app/src/components/decisions/ProposalsList.tsx
@@ -7,6 +7,7 @@ import { match } from '@op/core';
 import { Button, ButtonLink } from '@op/ui/Button';
 import { Checkbox } from '@op/ui/Checkbox';
 import { Dialog, DialogTrigger } from '@op/ui/Dialog';
+import { EmptyState } from '@op/ui/EmptyState';
 import { Header3 } from '@op/ui/Header';
 import { Modal } from '@op/ui/Modal';
 import { Select, SelectItem } from '@op/ui/Select';
@@ -14,13 +15,12 @@ import { Skeleton } from '@op/ui/Skeleton';
 import { Surface } from '@op/ui/Surface';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { LuArrowDownToLine } from 'react-icons/lu';
+import { LuArrowDownToLine, LuLeaf } from 'react-icons/lu';
 import type { z } from 'zod';
 
 import { useTranslations } from '@/lib/i18n';
 
 import { Bullet } from '../Bullet';
-import { EmptyProposalsState } from './EmptyProposalsState';
 import {
   ProposalCard,
   ProposalCardActions,
@@ -113,14 +113,14 @@ export const ProposalListSkeleton = () => {
 const NoProposalsFound = () => {
   const t = useTranslations();
   return (
-    <EmptyProposalsState>
+    <EmptyState icon={<LuLeaf className="size-6" />}>
       <Header3 className="font-serif !text-title-base font-light text-neutral-black">
         {t('No proposals found matching the current filters.')}
       </Header3>
       <p className="text-base text-neutral-charcoal">
         {t('Try adjusting your filter selection above.')}
       </p>
-    </EmptyProposalsState>
+    </EmptyState>
   );
 };
 
diff --git a/apps/app/src/components/decisions/ResultsList.tsx b/apps/app/src/components/decisions/ResultsList.tsx
index ac3704988..6362957de 100644
--- a/apps/app/src/components/decisions/ResultsList.tsx
+++ b/apps/app/src/components/decisions/ResultsList.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import { trpc } from '@op/api/client';
+import { EmptyState } from '@op/ui/EmptyState';
 import { Header3 } from '@op/ui/Header';
+import { LuLeaf } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
 
-import { EmptyProposalsState } from './EmptyProposalsState';
 import {
   ProposalCard,
   ProposalCardContent,
@@ -18,14 +19,14 @@ import {
 const NoProposalsFound = () => {
   const t = useTranslations();
   return (
-    <EmptyProposalsState>
+    <EmptyState icon={<LuLeaf className="size-6" />}>
       <Header3 className="font-serif !text-title-base font-light text-neutral-black">
         {t('No results yet for this decision.')}
       </Header3>
       <p className="text-base text-neutral-charcoal">
         {t('Results are still being worked on.')}
       </p>
-    </EmptyProposalsState>
+    </EmptyState>
   );
 };
 
diff --git a/apps/app/src/components/decisions/pages/ResultsPage.tsx b/apps/app/src/components/decisions/pages/ResultsPage.tsx
index 1f89e5650..2ca04fa86 100644
--- a/apps/app/src/components/decisions/pages/ResultsPage.tsx
+++ b/apps/app/src/components/decisions/pages/ResultsPage.tsx
@@ -3,9 +3,11 @@
 import { APIErrorBoundary } from '@/utils/APIErrorBoundary';
 import { trpc } from '@op/api/client';
 import { match } from '@op/core';
+import { EmptyState } from '@op/ui/EmptyState';
 import { Header3 } from '@op/ui/Header';
 import { Skeleton } from '@op/ui/Skeleton';
 import { Suspense } from 'react';
+import { LuLeaf } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n/routing';
 
@@ -15,7 +17,6 @@ import {
   DecisionResultsTabPanel,
   DecisionResultsTabs,
 } from '../DecisionResultsTabs';
-import { EmptyProposalsState } from '../EmptyProposalsState';
 import { MyBallot, NoVoteFound } from '../MyBallot';
 import { ProposalListSkeleton } from '../ProposalsList';
 import { ResultsList } from '../ResultsList';
@@ -146,14 +147,14 @@ function ResultsPageContent({
               <APIErrorBoundary
                 fallbacks={{
                   404: (
-                    <EmptyProposalsState>
+                    <EmptyState icon={<LuLeaf className="size-6" />}>
                       <Header3 className="font-serif !text-title-base font-light text-neutral-black">
                         {t('Results are still being processed.')}
                       </Header3>
                       <p className="text-base text-neutral-charcoal">
                         {t('Check back again shortly for the results.')}
                       </p>
-                    </EmptyProposalsState>
+                    </EmptyState>
                   ),
                 }}
               >
diff --git a/apps/app/src/components/decisions/pages/StandardDecisionPage.tsx b/apps/app/src/components/decisions/pages/StandardDecisionPage.tsx
index 51edb68fa..e45c5c74a 100644
--- a/apps/app/src/components/decisions/pages/StandardDecisionPage.tsx
+++ b/apps/app/src/components/decisions/pages/StandardDecisionPage.tsx
@@ -3,14 +3,15 @@
 import { getUniqueSubmitters } from '@/utils/proposalUtils';
 import { trpc } from '@op/api/client';
 import { match } from '@op/core';
+import { EmptyState } from '@op/ui/EmptyState';
 import { Header3 } from '@op/ui/Header';
 import { Suspense } from 'react';
+import { LuLeaf } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n/routing';
 
 import { DecisionActionBar } from '../DecisionActionBar';
 import { DecisionHero } from '../DecisionHero';
-import { EmptyProposalsState } from '../EmptyProposalsState';
 import { MemberParticipationFacePile } from '../MemberParticipationFacePile';
 import { ProposalListSkeleton, ProposalsList } from '../ProposalsList';
 
@@ -135,14 +136,14 @@ export function StandardDecisionPage({
         <div className="w-full gap-8 p-4 sm:max-w-6xl sm:p-8">
           <div className="lg:col-span-3">
             {proposals.length === 0 ? (
-              <EmptyProposalsState>
+              <EmptyState icon={<LuLeaf className="size-6" />}>
                 <Header3 className="font-serif !text-title-base font-light text-neutral-black">
                   {t('No proposals yet')}
                 </Header3>
                 <p className="text-base text-neutral-charcoal">
                   {t('You could be the first one to submit a proposal')}
                 </p>
-              </EmptyProposalsState>
+              </EmptyState>
             ) : (
               <Suspense fallback={<ProposalListSkeleton />}>
                 <ProposalsList
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d8c2edf75..d235dad83 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -21,6 +21,7 @@
     "./DatePicker": "./src/components/DatePicker.tsx",
     "./Dialog": "./src/components/Dialog.tsx",
     "./DropDownButton": "./src/components/DropDownButton.tsx",
+    "./EmptyState": "./src/components/EmptyState.tsx",
     "./Field": "./src/components/Field.tsx",
     "./Form": "./src/components/Form.tsx",
     "./Header": "./src/components/Header.tsx",
diff --git a/packages/ui/src/components/EmptyState.tsx b/packages/ui/src/components/EmptyState.tsx
new file mode 100644
index 000000000..b1f37967d
--- /dev/null
+++ b/packages/ui/src/components/EmptyState.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { LuCircleAlert } from 'react-icons/lu';
+
+export const EmptyState = ({
+  icon,
+  children,
+}: {
+  icon?: ReactNode;
+  children: ReactNode;
+}) => {
+  return (
+    <div className="flex min-h-40 w-full flex-col items-center justify-center py-6">
+      <div className="flex flex-col items-center justify-center gap-4 text-neutral-gray4">
+        <div className="flex size-10 items-center justify-center gap-4 rounded-full bg-neutral-gray1">
+          {icon ?? <LuCircleAlert />}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/ui/table.tsx b/packages/ui/src/components/ui/table.tsx
index 5084666e0..913f9f45c 100644
--- a/packages/ui/src/components/ui/table.tsx
+++ b/packages/ui/src/components/ui/table.tsx
@@ -27,9 +27,8 @@ import {
 import { LuArrowDown } from 'react-icons/lu';
 import { twJoin, twMerge } from 'tailwind-merge';
 
-import { cx } from '@/lib/primitive';
-
-import { Checkbox } from '@/components/Checkbox';
+import { cx } from '../../lib/primitive';
+import { Checkbox } from '../Checkbox';
 
 interface TableProps extends Omit<TablePrimitiveProps, 'className'> {
   allowResize?: boolean;
diff --git a/packages/ui/stories/EmptyState.stories.tsx b/packages/ui/stories/EmptyState.stories.tsx
new file mode 100644
index 000000000..c1ae001f0
--- /dev/null
+++ b/packages/ui/stories/EmptyState.stories.tsx
@@ -0,0 +1,73 @@
+import { LuFileText, LuInbox, LuSearch, LuUsers } from 'react-icons/lu';
+
+import { Button } from '../src/components/Button';
+import { EmptyState } from '../src/components/EmptyState';
+
+export default {
+  title: 'EmptyState',
+  component: EmptyState,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export const Default = () => (
+  <EmptyState>
+    <p>No items found</p>
+  </EmptyState>
+);
+
+export const WithCustomIcon = () => (
+  <EmptyState icon={<LuInbox />}>
+    <p>Your inbox is empty</p>
+  </EmptyState>
+);
+
+export const WithDescription = () => (
+  <EmptyState icon={<LuSearch />}>
+    <p className="font-medium">No results found</p>
+    <p className="text-sm">Try adjusting your search or filters</p>
+  </EmptyState>
+);
+
+export const WithAction = () => (
+  <EmptyState icon={<LuUsers />}>
+    <p className="font-medium">No team members</p>
+    <p className="mb-3 text-sm">
+      Get started by inviting your first team member
+    </p>
+    <Button size="small">Invite Member</Button>
+  </EmptyState>
+);
+
+export const Examples = () => (
+  <div className="grid w-full max-w-3xl grid-cols-2 gap-8">
+    <div className="rounded-lg border border-neutral-gray2 p-4">
+      <EmptyState>
+        <p>No items found</p>
+      </EmptyState>
+    </div>
+
+    <div className="rounded-lg border border-neutral-gray2 p-4">
+      <EmptyState icon={<LuInbox />}>
+        <p>Your inbox is empty</p>
+      </EmptyState>
+    </div>
+
+    <div className="rounded-lg border border-neutral-gray2 p-4">
+      <EmptyState icon={<LuSearch />}>
+        <p className="font-medium">No results found</p>
+        <p className="text-sm">Try adjusting your search</p>
+      </EmptyState>
+    </div>
+
+    <div className="rounded-lg border border-neutral-gray2 p-4">
+      <EmptyState icon={<LuFileText />}>
+        <p className="font-medium">No documents</p>
+        <p className="mb-3 text-sm">Upload your first document</p>
+        <Button size="small">Upload</Button>
+      </EmptyState>
+    </div>
+  </div>
+);