diff --git a/src/arrow.js b/src/arrow.js
index 1a9b6b0..da6925c 100644
--- a/src/arrow.js
+++ b/src/arrow.js
@@ -72,9 +72,6 @@ export default class Arrow {
                 m -5 -5
                 l 5 5
                 l -5 5`;
-
-            console.log(down_1, down_2, curve);
-            console.log(this.path);
         } else {
             if (end_x < start_x + curve) curve = end_x - start_x;
 
diff --git a/src/defaults.js b/src/defaults.js
index 820894f..d10c721 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -5,12 +5,18 @@ function getDecade(d) {
     return year - (year % 10) + '';
 }
 
+function formatWeek(d, ld, lang) {
+    let endOfWeek = date_utils.add(d, 6, 'day');
+    let endFormat = endOfWeek.getMonth() !== d.getMonth() ? 'D MMM' : 'D';
+    let beginFormat = !ld || d.getMonth() !== ld.getMonth() ? 'D MMM' : 'D';
+    return `${date_utils.format(d, beginFormat, lang)}-${date_utils.format(endOfWeek, endFormat, lang)}`;
+}
+
 const DEFAULT_VIEW_MODES = [
     {
         name: 'Hour',
         padding: '7d',
         step: '1h',
-        format_string: 'YYYY-MM-DD HH',
         lower_text: 'HH',
         upper_text: (d, ld, lang) =>
             !ld || d.getDate() !== ld.getDate()
@@ -22,7 +28,6 @@ const DEFAULT_VIEW_MODES = [
         name: 'Quarter Day',
         padding: '7d',
         step: '6h',
-        format_string: 'YYYY-MM-DD HH',
         lower_text: 'HH',
         upper_text: (d, ld, lang) =>
             !ld || d.getDate() !== ld.getDate()
@@ -34,7 +39,6 @@ const DEFAULT_VIEW_MODES = [
         name: 'Half Day',
         padding: '14d',
         step: '12h',
-        format_string: 'YYYY-MM-DD HH',
         lower_text: 'HH',
         upper_text: (d, ld, lang) =>
             !ld || d.getDate() !== ld.getDate()
@@ -65,10 +69,7 @@ const DEFAULT_VIEW_MODES = [
         step: '7d',
         format_string: 'YYYY-MM-DD',
         column_width: 140,
-        lower_text: (d, ld, lang) =>
-            !ld || d.getMonth() !== ld.getMonth()
-                ? date_utils.format(d, 'D MMM', lang)
-                : date_utils.format(d, 'D', lang),
+        lower_text: formatWeek,
         upper_text: (d, ld, lang) =>
             !ld || d.getMonth() !== ld.getMonth()
                 ? date_utils.format(d, 'MMMM', lang)
diff --git a/src/index.js b/src/index.js
index 6fa9a4e..2e4fa27 100644
--- a/src/index.js
+++ b/src/index.js
@@ -304,7 +304,7 @@ export default class Gantt {
             );
         }
 
-        let format_string =
+        this.config.format_string =
             this.config.view_mode.format_string || 'YYYY-MM-DD HH';
 
         this.gantt_start = gantt_start;
@@ -636,42 +636,12 @@ export default class Gantt {
      * @returns Object containing the x-axis distance and date of the current date, or null if the current date is out of the gantt range.
      */
     highlightNow() {
-        let now = new Date();
-        if (now < this.gantt_start || now > this.gantt_end) return null;
-
-        let current = new Date(),
-            el = this.$container.querySelector(
-                '.date_' +
-                    sanitize(
-                        date_utils.format(
-                            current,
-                            this.config.view_mode.format_string,
-                            this.options.language,
-                        ),
-                    ),
-            );
-
-        // safety check to prevent infinite loop
-        let c = 0;
-        while (!el && c < this.config.step) {
-            current = date_utils.add(current, -1, this.config.unit);
-            el = this.$container.querySelector(
-                '.date_' +
-                    sanitize(
-                        date_utils.format(
-                            current,
-                            this.config.view_mode.format_string,
-                            this.options.language,
-                        ),
-                    ),
-            );
-            c++;
-        }
+        const [_, el] = this.get_closest_date();
 
         el.classList.add('current-date-highlight');
 
         const diff_in_units = date_utils.diff(
-            now,
+            new Date(),
             this.gantt_start,
             this.config.unit,
         );
@@ -815,7 +785,7 @@ export default class Gantt {
         return {
             date,
             formatted_date: sanitize(
-                date_utils.format(date, this.config.view_mode.format_string),
+                date_utils.format(date, this.config.format_string),
             ),
             column_width: this.config.column_width,
             x,
@@ -940,11 +910,55 @@ export default class Gantt {
     }
 
     scroll_today() {
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
+        let [today, _] = this.get_closest_date();
         this.set_scroll_position(today);
     }
 
+    get_closest_date() {
+        let now = new Date();
+        if (now < this.gantt_start || now > this.gantt_end) return null;
+
+        let current = new Date(),
+            el = this.$container.querySelector(
+                '.date_' +
+                    sanitize(
+                        date_utils.format(
+                            current,
+                            this.config.format_string,
+                            this.options.language,
+                        ),
+                    ),
+            );
+
+        // safety check to prevent infinite loop
+        let c = 0;
+        while (!el && c < this.config.step) {
+            current = date_utils.add(current, -1, this.config.unit);
+            el = this.$container.querySelector(
+                '.date_' +
+                    sanitize(
+                        date_utils.format(
+                            current,
+                            this.config.format_string,
+                            this.options.language,
+                        ),
+                    ),
+            );
+            c++;
+        }
+
+        return [
+            new Date(
+                date_utils.format(
+                    current,
+                    this.config.format_string,
+                    this.options.language,
+                ) + ' ',
+            ),
+            el,
+        ];
+    }
+
     bind_grid_click() {
         $.on(this.$svg, 'click', '.grid-row, .grid-header', () => {
             this.unselect_all();
@@ -1305,6 +1319,7 @@ export default class Gantt {
             this.options.snap_at || this.config.view_mode.default_snap || '1d';
 
         if (default_snap !== 'unit') {
+            console.log(default_snap);
             const { duration, scale } = date_utils.parse_duration(default_snap);
             unit_length =
                 date_utils.convert_scales(this.config.view_mode.step, scale) /
diff --git a/src/styles/gantt.css b/src/styles/gantt.css
index 14cecb2..582134e 100644
--- a/src/styles/gantt.css
+++ b/src/styles/gantt.css
@@ -17,6 +17,7 @@
         padding: 10px;
         border-radius: 5px;
         width: max-content;
+        z-index: 1000;
 
         &.hidden {
             opacity: 0 !important;