diff --git a/cshare-app/src/components/StorageBar.jsx b/cshare-app/src/components/StorageBar.jsx
new file mode 100644
index 0000000..59263aa
--- /dev/null
+++ b/cshare-app/src/components/StorageBar.jsx
@@ -0,0 +1,61 @@
+import { formatFileSize } from '../data/mockData';
+
+export function StorageBar({ used, total, byType }) {
+  const pct = Math.min(100, (used / total) * 100);
+
+  return (
+    <div className="card" style={{
+      padding: '20px 24px',
+      animation: 'fadeInUp 0.4s 0.3s ease both',
+    }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+        <span style={{
+          fontSize: '0.6875rem', color: 'var(--text-muted)', textTransform: 'uppercase',
+          letterSpacing: '0.08em', fontFamily: 'var(--font-heading)', fontWeight: 600,
+        }}>
+          Storage Used
+        </span>
+        <span style={{
+          fontSize: '0.8125rem', fontFamily: 'var(--font-heading)', fontWeight: 600,
+          color: pct > 85 ? 'var(--danger)' : 'var(--accent)',
+        }}>
+          {formatFileSize(used)} / {formatFileSize(total)}
+        </span>
+      </div>
+
+      {/* Segmented bar */}
+      <div style={{
+        height: '8px', borderRadius: '4px', background: 'var(--bg-surface)',
+        overflow: 'hidden', display: 'flex', marginBottom: '14px',
+      }}>
+        {Object.entries(byType).map(([label, { size, color }]) => {
+          const segPct = (size / total) * 100;
+          return segPct > 0 ? (
+            <div
+              key={label}
+              style={{
+                width: `${segPct}%`,
+                height: '100%',
+                background: color,
+                transition: 'width 0.8s cubic-bezier(0.4, 0, 0.2, 1)',
+              }}
+              title={`${label}: ${formatFileSize(size)}`}
+            />
+          ) : null;
+        })}
+      </div>
+
+      {/* Legend */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+        {Object.entries(byType).map(([label, { size, color }]) => (
+          <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: color }} />
+            <span style={{ fontSize: '0.6875rem', color: 'var(--text-muted)' }}>
+              {label} <span style={{ color: 'var(--text-secondary)' }}>{formatFileSize(size)}</span>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}