diff --git a/src/Chart.tsx b/src/Chart.tsx
index 021eed9..948daec 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -3,7 +3,7 @@ import {
 } from 'recharts';
 import * as React from 'react';
 import * as _ from 'lodash';
-import { Title } from 'bloomer';
+import { Card, CardImage, CardHeader, CardHeaderTitle } from 'bloomer';
 const randomColor = require('randomcolor');
 import * as Papa from 'papaparse';
 
@@ -53,22 +53,28 @@ export class Chart extends React.Component<any, any> {
     //   return (<text>{props.name}</text>);
     // };
     return (
-      <div>
-        <Title isSize={4}>{_.capitalize(this.props.chartColumn)}</Title>
-        <ResponsiveContainer width="100%" height={500}>
-          <PieChart>
-            <Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}>
-              {
-                chartData.map((_0, _1) => {
-                  const color = _.get(colorMap, _0.name, randomColor());
-                  return (<Cell key={_1} fill={color} />)
-                })
-              }
-            </Pie>
-            <Tooltip />
-          </PieChart>
-        </ResponsiveContainer>
-      </div>
+      <Card>
+        <CardHeader>
+          <CardHeaderTitle className='is-centered'>
+            {_.capitalize(this.props.chartColumn)}
+          </CardHeaderTitle>
+        </CardHeader>
+        <CardImage>
+          <ResponsiveContainer width="100%" height={300}>
+            <PieChart>
+              <Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}>
+                {
+                  chartData.map((_0, _1) => {
+                    const color = _.get(colorMap, _0.name, randomColor());
+                    return (<Cell key={_1} fill={color} />)
+                  })
+                }
+              </Pie>
+              <Tooltip />
+            </PieChart>
+          </ResponsiveContainer>
+        </CardImage>
+      </Card>
     )
   }
 }