diff --git a/apps/web/src/app/(dashboard)/documents/empty-state.tsx b/apps/web/src/app/(dashboard)/documents/empty-state.tsx
new file mode 100644
index 000000000..fef3af5cc
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/documents/empty-state.tsx
@@ -0,0 +1,46 @@
+import { ArrowRight, CheckCircle2 } from 'lucide-react';
+
+export default function EmptyDocumentState({ status }: { status: string }) {
+  let headerText = 'All done';
+  let bodyText = 'All documents signed for now.';
+  let extraText = '';
+  let showArrow = false;
+
+  switch (status) {
+    case 'COMPLETED':
+      headerText = 'Nothing here';
+      bodyText = 'There are no signed documents yet.';
+      extraText = 'Start by adding a document';
+      showArrow = true;
+      break;
+    case 'DRAFT':
+      headerText = 'Nothing here';
+      bodyText = 'There are no drafts yet.';
+      extraText = 'Start by adding a document';
+      showArrow = true;
+      break;
+    case 'ALL':
+      headerText = 'Nothing here';
+      bodyText = 'There are no documents yet.';
+      extraText = 'Start by adding a document';
+      showArrow = true;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <div className="text-muted-foreground/50 flex h-96 flex-col items-center justify-center space-y-3">
+      <CheckCircle2 className="text-muted-foreground/50 h-14 w-14" />
+      <div className="text-center">
+        <h3 className="text-lg font-semibold">{headerText}</h3>
+        <p>{bodyText}</p>
+        {extraText && (
+          <p>
+            {extraText} {showArrow && <ArrowRight className="inline h-4 w-4" />}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(dashboard)/documents/page.tsx b/apps/web/src/app/(dashboard)/documents/page.tsx
index 4597ab833..9a448923e 100644
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@@ -1,7 +1,5 @@
 import Link from 'next/link';
 
-import { CheckCircle2 } from 'lucide-react';
-
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
 import { getStats } from '@documenso/lib/server-only/document/get-stats';
@@ -14,7 +12,7 @@ import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/ty
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 import { DocumentsDataTable } from './data-table';
-import { UploadDocument } from './upload-document';
+import EmptyDocumentState from './empty-state';
 
 export type DocumentsPageProps = {
   searchParams?: {
@@ -92,20 +90,8 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
 
       <div className="mt-8">
         {results.count > 0 && <DocumentsDataTable results={results} />}
-        {results.count === 0 && <EmptyDocumentState />}
+        {results.count === 0 && <EmptyDocumentState status={status} />}
       </div>
     </div>
   );
 }
-
-const EmptyDocumentState = () => {
-  return (
-    <div className="text-muted-foreground/50 flex h-96 flex-col items-center justify-center space-y-3">
-      <CheckCircle2 className="text-muted-foreground/50 h-14 w-14" />
-      <div className="text-center">
-        <h3 className="text-lg font-semibold">All done</h3>
-        <p>All documents signed for now.</p>
-      </div>
-    </div>
-  );
-};