diff --git a/src/components/SyncStatusCardConsensus.stories.tsx b/src/components/SyncStatusCardConsensus.stories.tsx
new file mode 100644
index 00000000..8c3a634c
--- /dev/null
+++ b/src/components/SyncStatusCardConsensus.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import SyncStatusCardConsensus from './SyncStatusCardConsensus'
+
+const meta = {
+  title: 'General/SyncStatusCardConsensus',
+  component: SyncStatusCardConsensus,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div style={{ height: '25vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SyncStatusCardConsensus>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithData: Story = {
+  args: {
+    synced: 132432,
+    total: 200000,
+  },
+}
+export const WithoutData: Story = {
+  args: {
+    synced: 0,
+    total: 0,
+  },
+}
+
+ 
diff --git a/src/components/SyncStatusCardConsensus.tsx b/src/components/SyncStatusCardConsensus.tsx
index 3cb55807..2aa80e8a 100644
--- a/src/components/SyncStatusCardConsensus.tsx
+++ b/src/components/SyncStatusCardConsensus.tsx
@@ -21,7 +21,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
       {
         id: 'storage',
         label: 'Free',
-        value: total - synced,
+        value: total - synced || 1,
         color: '#E7EAEE',
       },
     ]