diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index e95f47387..c3d40867e 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -33,6 +33,7 @@ function WidgetChart(props: Props) {
 
     const isTableWidget = metric.metricType === 'table' && metric.viewType === 'table';
     const isPieChart = metric.metricType === 'table' && metric.viewType === 'pieChart';
+    const isFunnel = metric.metricType === 'funnel';
 
     const onChartClick = (event: any) => {
         if (event) {
@@ -82,7 +83,7 @@ function WidgetChart(props: Props) {
     const renderChart = () => {
         const { metricType, viewType } = metric;
 
-        if (metricType === 'funnel') {
+        if (isFunnel) {
             return <FunnelWidget metric={metric} />
         }
 
@@ -136,7 +137,7 @@ function WidgetChart(props: Props) {
         return <div>Unknown</div>;
     }
     return useObserver(() => (
-        <Loader loading={loading} size="small" style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>
+        <Loader loading={!isFunnel && loading} size="small" style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>
             {renderChart()}
         </Loader>
     ));
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index 79b44bc5a..4659a4494 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -27,6 +27,7 @@ function WidgetForm(props: Props) {
     const timeseriesOptions = metricOf.filter(i => i.type === 'timeseries');
     const tableOptions = metricOf.filter(i => i.type === 'table');
     const isTable = metric.metricType === 'table';
+    const isFunnel = metric.metricType === 'funnel';
     const _issueOptions = [{ text: 'All', value: 'all' }].concat(issueOptions);
     const canAddToDashboard = metric.exists() && dashboards.length > 0;
     const canAddSeries = metric.series.length < 3;
@@ -87,7 +88,7 @@ function WidgetForm(props: Props) {
     }
     
     return useObserver(() => (
-        <div className="p-4">
+        <div className="p-6">
             <div className="form-group">
                 <label className="font-medium">Metric Type</label>
                 <div className="flex items-center">
@@ -152,8 +153,8 @@ function WidgetForm(props: Props) {
 
             <div className="form-group">
                 <div className="font-medium items-center py-2">
-                    {`${isTable ? 'Filter by' : 'Chart Series'}`}
-                    {!isTable && (
+                    {`${(isTable || isFunnel) ? 'Filter by' : 'Chart Series'}`}
+                    {!isTable && !isFunnel && (
                         <Button
                             className="ml-2"
                             primary plain size="small"
@@ -163,7 +164,7 @@ function WidgetForm(props: Props) {
                     )}
                 </div>
 
-                {metric.series.length > 0 && metric.series.slice(0, isTable ? 1 : metric.series.length).map((series: any, index: number) => (
+                {metric.series.length > 0 && metric.series.slice(0, (isTable || isFunnel) ? 1 : metric.series.length).map((series: any, index: number) => (
                     <div className="mb-2">
                         <FilterSeries
                             hideHeader={ isTable }
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index 1993cd2f6..fb22728d3 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -40,7 +40,7 @@ function WidgetView(props: Props) {
             <div className="relative pb-10">
                 <BackLink onClick={onBackHandler} vertical className="absolute" style={{ left: '-50px', top: '0px' }} />
                 <div className="bg-white rounded border">
-                    <div className="p-4 flex justify-between items-center">
+                    <div className="px-6 py-4 flex justify-between items-center">
                         <h1 className="mb-0 text-2xl">
                             <WidgetName
                                 name={widget.name}
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index 5530a550c..55878e278 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -10,16 +10,7 @@ interface Props {
 function FunnelBar(props: Props) {
     const { filter } = props;
     const { completed, dropped } = filter;
-
-    const calculatePercentage = (completed: number, dropped: number) => {
-        const total = completed + dropped;
-        if (total === 0) {
-            return 0;
-        }
-        return Math.round((completed / total) * 100);
-    }
     const completedPercentage = calculatePercentage(completed, dropped);
-    console.log('completedPercentage', completedPercentage)
 
     return (
         <div className="w-full mb-4">
@@ -61,4 +52,12 @@ function FunnelBar(props: Props) {
     );
 }
 
-export default FunnelBar;
\ No newline at end of file
+export default FunnelBar;
+
+const calculatePercentage = (completed: number, dropped: number) => {
+    const total = completed + dropped;
+    if (total === 0) {
+        return 0;
+    }
+    return Math.round((completed / total) * 100);
+}
\ No newline at end of file