diff --git a/src/components/general/ProfitPill.vue b/src/components/general/ProfitPill.vue
index 83cfa91f..f4c7e73e 100644
--- a/src/components/general/ProfitPill.vue
+++ b/src/components/general/ProfitPill.vue
@@ -4,10 +4,10 @@
     :class="isProfitable ? 'profit-pill-profit' : ''"
     :title="profitDesc"
   >
-    {{ profitRatio ? formatPercent(profitRatio, 2) : '' }}
+    {{ profitRatio !== undefined ? formatPercent(profitRatio, 2) : '' }}
     <span class="ml-1" :class="profitRatio ? 'small' : ''" :title="stakeCurrency">
-      {{ profitRatio ? '(' : '' }}{{ `${formatPrice(profitAbs, 3)}`
-      }}{{ profitRatio ? ')' : ` ${stakeCurrency}` }}
+      {{ profitRatio !== undefined ? '(' : '' }}{{ `${formatPrice(profitAbs, 3)}`
+      }}{{ profitRatio !== undefined ? ')' : ` ${stakeCurrency}` }}
     </span>
   </div>
 </template>
diff --git a/tests/unit/ProfitPill.spec.ts b/tests/unit/ProfitPill.spec.ts
new file mode 100644
index 00000000..c7429b46
--- /dev/null
+++ b/tests/unit/ProfitPill.spec.ts
@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
+import ProfitPill from '@/components/general/ProfitPill.vue';
+
+describe('ProfitPill.vue', () => {
+  let cmp;
+
+  beforeEach(() => {
+    cmp = mount(ProfitPill, {
+      propsData: {
+        profitRatio: 0,
+        profitAbs: 0,
+        profitDesc: '',
+        stakeCurrency: 'USDT',
+      },
+    });
+  });
+  it('Shows a Green pill with positive profits', async () => {
+    const props = {
+      profitRatio: 0.051,
+      profitAbs: 0.1,
+    };
+    cmp.setProps(props);
+    await Vue.nextTick();
+    expect(cmp.html()).toContain('profit-pill-profit');
+    expect(cmp.html()).toContain('5.10%');
+    expect(cmp.html()).toContain('(0.1)');
+    expect(cmp.html()).toContain('title="USDT"');
+  });
+  it('Shows a Red pill with positive profits', async () => {
+    const props = {
+      profitRatio: -0.1,
+      profitAbs: -0.1,
+      stakeCurrency: 'USDT',
+    };
+    cmp.setProps(props);
+    await Vue.nextTick();
+    expect(cmp.html()).not.toContain('profit-pill-profit');
+    expect(cmp.html()).toContain('profit-pill');
+    expect(cmp.html()).toContain('(-0.1)');
+    expect(cmp.html()).toContain('-10.00%');
+    expect(cmp.html()).toContain('title="USDT"');
+  });
+  it('Shows a pill with 0.0 profits.', async () => {
+    const props = {
+      profitRatio: 0.0,
+      profitAbs: 0.0,
+      stakeCurrency: 'BTC',
+    };
+    cmp.setProps(props);
+    await Vue.nextTick();
+    expect(cmp.html()).toContain('profit-pill');
+    expect(cmp.html()).toContain('0.00%');
+    expect(cmp.html()).toContain('(0)');
+    expect(cmp.html()).toContain('title="BTC"');
+  });
+});