diff --git a/index.html b/index.html
index b864356..69468e8 100644
--- a/index.html
+++ b/index.html
@@ -68,8 +68,8 @@
                     dependencies: 'Task 2',
                 },
                 {
-                    start: '2024-04-08',
-                    end: '2024-04-10',
+                    start: '2024-03-08',
+                    end: '2024-05-10',
                     name: 'Deploy',
                     id: 'Task 4',
                     progress: 0,
@@ -108,7 +108,7 @@
                 // on_hover (task, x, y) {
                 //   console.log("Hover", x, y);
                 // }
-                view_mode: 'Day',
+                view_mode: 'Month',
                 // view_modes: [
                 //     {
                 //         name: 'Custom Day',
diff --git a/src/bar.js b/src/bar.js
index 9f5b542..f968072 100644
--- a/src/bar.js
+++ b/src/bar.js
@@ -505,11 +505,9 @@ export default class Bar {
         const task_start = this.task._start;
         const gantt_start = this.gantt.gantt_start;
 
-        const diff = date_utils.diff(
-            task_start,
-            gantt_start,
-            this.gantt.config.unit,
-        );
+        const diff =
+            date_utils.diff(task_start, gantt_start, this.gantt.config.unit) /
+            this.gantt.config.step;
         let x = diff * column_width;
 
         /* Since the column width is based on 30,
@@ -540,6 +538,13 @@ export default class Bar {
     }
 
     compute_duration() {
+        console.log(
+            date_utils.diff(
+                this.task._end,
+                this.task._start,
+                this.gantt.config.unit,
+            ),
+        );
         this.duration =
             date_utils.diff(
                 this.task._end,
diff --git a/src/date_utils.js b/src/date_utils.js
index 0dc6e36..2bc7c1b 100644
--- a/src/date_utils.js
+++ b/src/date_utils.js
@@ -122,7 +122,7 @@ export default {
         return str;
     },
 
-    diff(date_a, date_b, scale = DAY) {
+    diff(date_a, date_b, scale = 'day') {
         let milliseconds, seconds, hours, minutes, days, months, years;
 
         milliseconds = date_a - date_b;
@@ -131,13 +131,14 @@ export default {
         hours = minutes / 60;
         days = hours / 24;
         // Calculate months across years
-        const yearDiff = date_a.getFullYear() - date_b.getFullYear();
-        const monthDiff = date_a.getMonth() - date_b.getMonth();
+        let yearDiff = date_a.getFullYear() - date_b.getFullYear();
+        let monthDiff = date_a.getMonth() - date_b.getMonth();
+        // calculate extra
+        monthDiff += (days % 30) / 30;
 
         /* If monthDiff is negative, date_b is in an earlier month than
         date_a and thus subtracted from the year difference in months */
         months = yearDiff * 12 + monthDiff;
-
         /* If date_a's (e.g. march 1st) day of the month is smaller than date_b (e.g. february 28th),
         adjust the month difference */
         if (date_a.getDate() < date_b.getDate()) {
@@ -151,16 +152,18 @@ export default {
             scale += 's';
         }
 
-        return Math.floor(
-            {
-                milliseconds,
-                seconds,
-                minutes,
-                hours,
-                days,
-                months,
-                years,
-            }[scale],
+        return (
+            Math.round(
+                {
+                    milliseconds,
+                    seconds,
+                    minutes,
+                    hours,
+                    days,
+                    months,
+                    years,
+                }[scale] * 100,
+            ) / 100
         );
     },
 
diff --git a/src/index.js b/src/index.js
index b09ee77..eda0780 100644
--- a/src/index.js
+++ b/src/index.js
@@ -349,6 +349,7 @@ export default class Gantt {
                 class: 'grid-row',
                 append_to: rows_layer,
             });
+            // FIX
             if (
                 this.options.lines === 'both' ||
                 this.options.lines === 'horizontal'
@@ -750,7 +751,7 @@ export default class Gantt {
                     ? date_utils.format(date, upper_text, this.options.language)
                     : upper_text(date, last_date, this.options.language),
             lower_text:
-                typeof upper_text === 'string'
+                typeof lower_text === 'string'
                     ? date_utils.format(date, lower_text, this.options.language)
                     : lower_text(date, last_date, this.options.language),
             upper_x: base_pos.x + x_pos[`${this.config.view_mode.name}_upper`],