diff --git a/webui/src/common/components/EmptyState/EmptyState.jsx b/webui/src/common/components/EmptyState/EmptyState.jsx
new file mode 100644
index 0000000..4ff967d
--- /dev/null
+++ b/webui/src/common/components/EmptyState/EmptyState.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import './styles.sass';
+
+export const EmptyState = ({
+  icon,
+  title,
+  description,
+  action,
+  className = ''
+}) => {
+  return (
+    <div className={`empty-state ${className}`}>
+      {icon && <div className="empty-state-icon">{icon}</div>}
+      {title && <h3 className="empty-state-title">{title}</h3>}
+      {description && <p className="empty-state-description">{description}</p>}
+      {action && <div className="empty-state-action">{action}</div>}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/webui/src/common/components/EmptyState/index.js b/webui/src/common/components/EmptyState/index.js
new file mode 100644
index 0000000..97972bb
--- /dev/null
+++ b/webui/src/common/components/EmptyState/index.js
@@ -0,0 +1 @@
+export { EmptyState as default } from './EmptyState.jsx';
\ No newline at end of file
diff --git a/webui/src/common/components/EmptyState/styles.sass b/webui/src/common/components/EmptyState/styles.sass
new file mode 100644
index 0000000..a183db4
--- /dev/null
+++ b/webui/src/common/components/EmptyState/styles.sass
@@ -0,0 +1,32 @@
+.empty-state
+  text-align: center
+  padding: 3rem 2rem
+  color: var(--text-dim)
+  display: flex
+  flex-direction: column
+  align-items: center
+  gap: 1rem
+
+.empty-state-icon
+  color: var(--text-dim)
+  display: flex
+  justify-content: center
+  
+  svg
+    width: 48px
+    height: 48px
+
+.empty-state-title
+  font-size: 1.2rem
+  font-weight: 600
+  color: var(--text)
+  margin: 0
+
+.empty-state-description
+  font-size: 0.95rem
+  margin: 0
+  max-width: 400px
+  line-height: 1.5
+
+.empty-state-action
+  margin-top: 0.5rem
\ No newline at end of file