diff --git a/webui/src/common/components/DetailItem/DetailItem.jsx b/webui/src/common/components/DetailItem/DetailItem.jsx
new file mode 100644
index 0000000..09730c7
--- /dev/null
+++ b/webui/src/common/components/DetailItem/DetailItem.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import './styles.sass';
+
+export const DetailItem = ({
+  icon,
+  children,
+  className = '',
+  ...rest
+}) => {
+  return (
+    <div className={`detail-item ${className}`} {...rest}>
+      {icon && <span className="detail-item-icon">{icon}</span>}
+      <span className="detail-item-content">{children}</span>
+    </div>
+  );
+};
+
+export const DetailList = ({
+  children,
+  className = '',
+  ...rest
+}) => {
+  return (
+    <div className={`detail-list ${className}`} {...rest}>
+      {children}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/webui/src/common/components/DetailItem/index.js b/webui/src/common/components/DetailItem/index.js
new file mode 100644
index 0000000..2be9102
--- /dev/null
+++ b/webui/src/common/components/DetailItem/index.js
@@ -0,0 +1 @@
+export { DetailItem as default, DetailList } from './DetailItem.jsx';
\ No newline at end of file
diff --git a/webui/src/common/components/DetailItem/styles.sass b/webui/src/common/components/DetailItem/styles.sass
new file mode 100644
index 0000000..28cd722
--- /dev/null
+++ b/webui/src/common/components/DetailItem/styles.sass
@@ -0,0 +1,23 @@
+.detail-list
+  display: flex
+  flex-direction: column
+  gap: 0.75rem
+
+.detail-item
+  display: flex
+  align-items: center
+  gap: 0.75rem
+  color: var(--text-dim)
+  font-size: 0.9rem
+
+.detail-item-icon
+  color: var(--text-dim)
+  display: inline-flex
+  flex-shrink: 0
+  
+  svg
+    color: inherit
+
+.detail-item-content
+  flex: 1
+  min-width: 0
\ No newline at end of file