diff --git a/app/assets/javascripts/kanaui/dashboard.js b/app/assets/javascripts/kanaui/dashboard.js
index bdff069..f7f8d20 100644
--- a/app/assets/javascripts/kanaui/dashboard.js
+++ b/app/assets/javascripts/kanaui/dashboard.js
@@ -1,11 +1,11 @@
-$(document).ready(function() {
-    var spinOptions = {
-        top: '150px',
-        lines: 10,
-        length: 8,
-        width: 4,
-        radius: 8,
-        speed: 1
-    }
-    $('#loading-spinner').spin(spinOptions);
+$(document).ready(function () {
+  var spinOptions = {
+    top: "150px",
+    lines: 10,
+    length: 8,
+    width: 4,
+    radius: 8,
+    speed: 1,
+  };
+  $("#loading-spinner").spin(spinOptions);
 });
diff --git a/app/assets/javascripts/kanaui/kiddo/axes.js b/app/assets/javascripts/kanaui/kiddo/axes.js
index 7f1b812..73a4271 100644
--- a/app/assets/javascripts/kanaui/kiddo/axes.js
+++ b/app/assets/javascripts/kanaui/kiddo/axes.js
@@ -1,20 +1,18 @@
-;(function(Kiddo, d3){
-  Kiddo.Axes = function(){
+(function (Kiddo, d3) {
+  Kiddo.Axes = function () {
     var self = this;
 
-    var makeXAxis = function(){
-      return d3.svg.axis()
-        .scale(self.x)
-        .orient("bottom")
-        .ticks(6);
-    }
+    var makeXAxis = function () {
+      return d3.svg.axis().scale(self.x).orient("bottom").ticks(6);
+    };
 
-    var makeYAxis = function(){
-      return d3.svg.axis()
+    var makeYAxis = function () {
+      return d3.svg
+        .axis()
         .scale(self.y)
         .orient("left")
-        .tickFormat(d3.format(',d'));
-    }
+        .tickFormat(d3.format(",d"));
+    };
 
     var xAxis = makeXAxis();
     var yAxis = makeYAxis();
@@ -22,34 +20,43 @@
     return {
       x: xAxis,
       y: yAxis,
-      render: function(svg, yTitle){
-          svg.append("g")
-              .attr("class", "grid")
-              .attr("transform", "translate(" + self.margin_left + "," + self.height + ")")
-              .call(makeXAxis().tickSize(-self.height, 0, 0).tickFormat(""));
-
-          svg.append("g")
-              .attr("class", "grid")
-              .attr("transform", "translate(" + self.margin_left + ",0)")
-              .call(makeYAxis().tickSize(-self.width, 0, 0).tickFormat(""));
-
-          svg.append("g")
-              .attr("class", "x axis")
-              .attr("transform", "translate(" + self.margin_left + "," + self.height + ")")
-              .call(xAxis);
-
-          svg.append("g")
-              .attr("class", "y axis")
-              .attr("transform", "translate(" + self.margin_left + ",0)")
-              .call(yAxis);
-              //.append("text")
-              //.attr("transform", "rotate(-90)")
-              //.attr("y", 6)
-              //.attr("dy", ".71em")
-              //.style("text-anchor", "end")
-              //.text(yTitle);
-
-      }
+      render: function (svg, yTitle) {
+        svg
+          .append("g")
+          .attr("class", "grid")
+          .attr(
+            "transform",
+            "translate(" + self.margin_left + "," + self.height + ")"
+          )
+          .call(makeXAxis().tickSize(-self.height, 0, 0).tickFormat(""));
+
+        svg
+          .append("g")
+          .attr("class", "grid")
+          .attr("transform", "translate(" + self.margin_left + ",0)")
+          .call(makeYAxis().tickSize(-self.width, 0, 0).tickFormat(""));
+
+        svg
+          .append("g")
+          .attr("class", "x axis")
+          .attr(
+            "transform",
+            "translate(" + self.margin_left + "," + self.height + ")"
+          )
+          .call(xAxis);
+
+        svg
+          .append("g")
+          .attr("class", "y axis")
+          .attr("transform", "translate(" + self.margin_left + ",0)")
+          .call(yAxis);
+        //.append("text")
+        //.attr("transform", "rotate(-90)")
+        //.attr("y", 6)
+        //.attr("dy", ".71em")
+        //.style("text-anchor", "end")
+        //.text(yTitle);
+      },
     };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);
diff --git a/app/assets/javascripts/kanaui/kiddo/charts/line_chart.js b/app/assets/javascripts/kanaui/kiddo/charts/line_chart.js
index 66c9a93..b75b749 100644
--- a/app/assets/javascripts/kanaui/kiddo/charts/line_chart.js
+++ b/app/assets/javascripts/kanaui/kiddo/charts/line_chart.js
@@ -1,72 +1,156 @@
-;(function(Kiddo, d3){
-  Kiddo.LineChart = function(){
+(function (Kiddo, d3) {
+  Kiddo.LineChart = function () {
     var self = this;
 
     this.x = d3.time.scale().range([0, this.width]);
     this.y = d3.scale.linear().range([this.height, 0]);
 
-    var valueline = d3.svg.line()
-      .x(function(d) { return self.x(d.x); })
-      .y(function(d) { return self.y(d.y); });
+    var valueline = d3.svg
+      .line()
+      .x(function (d) {
+        return self.x(d.x);
+      })
+      .y(function (d) {
+        return self.y(d.y);
+      })
+      .interpolate("monotone"); // Smooth line interpolation
 
     var axes = Kiddo.Axes.apply(this);
     var helper = new Kiddo.Helper();
 
-    self.color = d3.scale.category10();
+    // Custom blue color theme matching the image
+    var blueColors = [
+      "#1565C0",
+      "#1976D2",
+      "#2196F3",
+      "#42A5F5",
+      "#64B5F6",
+      "#90CAF9",
+      "#BBDEFB",
+      "#E3F2FD",
+    ];
+    self.color = d3.scale.ordinal().range(blueColors);
 
     return {
-      render: function(svg, json){
+      render: function (svg, json) {
         var title = json.title,
           datasets = json.data;
 
         // Scale the range of the data before rendering axes
-        var allValues = datasets.reduce(function(result, element){
+        var allValues = datasets.reduce(function (result, element) {
           return result.concat(element.values);
         }, []);
 
-        var x_domain = d3.extent(allValues, function(d){
+        var x_domain = d3.extent(allValues, function (d) {
           return new Date(d.x);
         });
 
         self.x.domain(x_domain);
 
-        var y_domain = [d3.min(datasets, function (datum) {
-                            return d3.min(datum.values, function (d) {
-                                return d.y;
-                            });
-                        }),
-                        d3.max(datasets, function (datum) {
-                            return d3.max(datum.values, function (d) {
-                                return d.y;
-                            });
-                        })];
+        var y_domain = [
+          d3.min(datasets, function (datum) {
+            return d3.min(datum.values, function (d) {
+              return d.y;
+            });
+          }),
+          d3.max(datasets, function (datum) {
+            return d3.max(datum.values, function (d) {
+              return d.y;
+            });
+          }),
+        ];
 
         self.y.domain(y_domain);
 
+        // Render axes first
         axes.render(svg, title);
 
         self.color.domain(d3.keys(datasets));
 
-        datasets.forEach(function(dataset){
+        // Create legend container at the top
+        var legendContainer = svg
+          .append("g")
+          .attr("class", "chart-legend")
+          .attr("transform", "translate(" + (self.width - 100) + ", -25)");
+
+        // Calculate total values for legend
+        var legendData = datasets.map(function (dataset, index) {
+          var latestValue = dataset.values[dataset.values.length - 1];
+          var totalCount = dataset.values.length;
+          return {
+            name: dataset.name,
+            value: latestValue ? latestValue.y : 0,
+            count: totalCount,
+            color: self.color(dataset.name),
+            index: index,
+          };
+        });
+
+        // Create legend items
+        var legendItems = legendContainer
+          .selectAll(".legend-item")
+          .data(legendData)
+          .enter()
+          .append("g")
+          .attr("class", "legend-item");
+
+        var xOffset = 0;
+        legendItems.each(function (d, i) {
+          var legendItem = d3.select(this);
+
+          // Add colored circle
+          legendItem
+            .append("circle")
+            .attr("cx", xOffset + 6)
+            .attr("cy", 0)
+            .attr("r", 6)
+            .style("fill", d.color);
+
+          // Add text label
+          var labelText =
+            d.name + " :: " + d.count + ": " + d3.format(",.2f")(d.value);
+          legendItem
+            .append("text")
+            .attr("x", xOffset + 18)
+            .attr("y", 0)
+            .attr("dy", "0.35em")
+            .style("font-size", "0.875rem")
+            .style("font-weight", "500")
+            .style("fill", "#6B7280")
+            .text(labelText);
+
+          // Calculate width for next item
+          var textWidth = this.getBBox().width;
+          xOffset += textWidth + 40; // Add spacing between items
+        });
+
+        // Render data lines
+        datasets.forEach(function (dataset) {
           var data = dataset.values,
             name = dataset.name;
 
-          data.forEach(function(d) {
-            d.date = d.x.split('T')[0]; // Support both date and date/times
+          data.forEach(function (d) {
+            d.date = d.x.split("T")[0]; // Support both date and date/times
             d.x = helper.parseDate(d.date);
             d.y = +d.y;
           });
 
-          svg.append('path')
-            .attr('class', 'line')
-            .attr('d', valueline(data))
+          svg
+            .append("path")
+            .attr("class", "line")
+            .attr("d", valueline(data))
             .attr("transform", "translate(" + self.margin_left + ",0)")
-            .style("stroke", function() { return self.color(name); });
+            .style("stroke", function () {
+              return self.color(name);
+            })
+            .style("stroke-width", "0.125rem")
+            .style("fill", "none")
+            .style("opacity", 0.9);
         });
 
         self.datasets = datasets;
         Kiddo.Utils.MouseOver.apply(self).render(svg, self.x, self.y);
-      }
-    }
+      },
+    };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);
diff --git a/app/assets/javascripts/kanaui/kiddo/charts/pie_chart.js b/app/assets/javascripts/kanaui/kiddo/charts/pie_chart.js
index 9cf7cb7..e297828 100644
--- a/app/assets/javascripts/kanaui/kiddo/charts/pie_chart.js
+++ b/app/assets/javascripts/kanaui/kiddo/charts/pie_chart.js
@@ -1,51 +1,84 @@
-;(function(Kiddo, d3){
-  Kiddo.PieChart = function(){
+(function (Kiddo, d3) {
+  Kiddo.PieChart = function () {
     var self = this;
     var radius = Math.min(this.width, this.height) / 2;
-    var color = d3.scale.category10();
 
-    var arc = d3.svg.arc()
+    // Custom blue color theme - matching the line chart
+    var blueColors = [
+      "#1565C0",
+      "#1976D2",
+      "#2196F3",
+      "#42A5F5",
+      "#64B5F6",
+      "#90CAF9",
+      "#BBDEFB",
+      "#E3F2FD",
+    ];
+    var color = d3.scale.ordinal().range(blueColors);
+
+    var arc = d3.svg
+      .arc()
       .outerRadius(radius - 10)
       .innerRadius(0);
 
-    var pie = d3.layout.pie()
+    var pie = d3.layout
+      .pie()
       .sort(null)
-      .value(function(d) { return d.value; });
+      .value(function (d) {
+        return d.value;
+      });
 
     return {
-      render: function(svg, json){
+      render: function (svg, json) {
         var data = json.data;
 
-        svg.attr('transform', "translate(" + self.width / 2 + "," + self.height / 2 + ")");
+        svg.attr(
+          "transform",
+          "translate(" + self.width / 2 + "," + self.height / 2 + ")"
+        );
 
-        data.forEach(function(d){
+        data.forEach(function (d) {
           d.value = +d.value;
         });
 
-        var g = svg.selectAll(".arc")
+        var g = svg
+          .selectAll(".arc")
           .data(pie(data))
-          .enter().append("g")
+          .enter()
+          .append("g")
           .attr("class", "arc");
 
         g.append("path")
           .attr("d", arc)
-          .style("fill", function(d) { return color(d.data.value); });
+          .style("fill", function (d, i) {
+            return color(i);
+          }) // Use index for consistent coloring
+          .style("stroke", "#ffffff")
+          .style("stroke-width", "1px"); // Add white borders for better separation
 
-        var colorCircle = function(value){
-          return(
-            '<span class="colored-dot" style="background-color:' + color(value) + ';"></span>'
+        var colorCircle = function (value, index) {
+          return (
+            '<span class="colored-dot" style="background-color:' +
+            color(index) +
+            ';"></span>'
           );
-        }
+        };
 
         g.append("foreignObject")
           .attr("width", 200)
           .attr("height", 150)
           .attr("dy", ".35em")
           .attr("x", 250)
-          .attr("y", function(d, i) { return 50 * i - 200; })
-          .html(function(d) { return  colorCircle(d.data.value) + d.data.label + ": " + d.data.value; })
+          .attr("y", function (d, i) {
+            return 50 * i - 200;
+          })
+          .html(function (d, i) {
+            return (
+              colorCircle(d.data.value, i) + d.data.label + ": " + d.data.value
+            );
+          })
           .attr("class", "chart_values");
-      }
-    }
+      },
+    };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);
diff --git a/app/assets/javascripts/kanaui/kiddo/charts/utils/mouse_over.js b/app/assets/javascripts/kanaui/kiddo/charts/utils/mouse_over.js
index 417b930..e472b41 100644
--- a/app/assets/javascripts/kanaui/kiddo/charts/utils/mouse_over.js
+++ b/app/assets/javascripts/kanaui/kiddo/charts/utils/mouse_over.js
@@ -1,46 +1,58 @@
-;(function(Kiddo, d3){
+(function (Kiddo, d3) {
   Kiddo.Utils = Kiddo.Utils || {};
 
-  Kiddo.Utils.MouseOver = function(){
+  Kiddo.Utils.MouseOver = function () {
     var self = this;
     var helper = new Kiddo.Helper();
 
     return {
-      render: function(svg, x, y){
-        var focus = svg.append("g")
-            .attr("class", "focus")
-            .style("display", "none");
+      render: function (svg, x, y) {
+        var focus = svg
+          .append("g")
+          .attr("class", "focus")
+          .style("display", "none");
 
-        var canvas = svg.append("g")
+        var canvas = svg
+          .append("g")
           .attr("id", "mouseover_canvas")
           .style("display", "none");
 
-        var info = canvas.append("rect")
+        var info = canvas
+          .append("rect")
           .attr("class", "information")
           .attr("width", self.width / 2);
 
         // The magic:
-        svg.append("rect")
+        svg
+          .append("rect")
           .attr("class", "overlay")
           .attr("width", self.width)
           .attr("height", self.height)
-          .attr('transform', 'translate(' + self.margin_left + ',0)')
-          .on("mouseover", function() { focus.style("display", null); canvas.style("display", null); })
-          .on("mouseout", function() { focus.style("display", "none"); canvas.style("display", "none"); })
+          .attr("transform", "translate(" + self.margin_left + ",0)")
+          .on("mouseover", function () {
+            focus.style("display", null);
+            canvas.style("display", null);
+          })
+          .on("mouseout", function () {
+            focus.style("display", "none");
+            canvas.style("display", "none");
+          })
           .on("mousemove", mousemove);
 
-        var infoTitleBg = canvas.append("rect")
+        var infoTitleBg = canvas
+          .append("rect")
           .attr("class", "info-title__bg")
           .attr("width", self.width)
           .attr("height", 30);
 
-        var infoTitle = canvas.append("text")
+        var infoTitle = canvas
+          .append("text")
           .attr("dy", "1em")
           .attr("dx", 0)
           .attr("class", "info-title")
           .attr("id", "info-title");
 
-        var addInfoDimensions = function(element) {
+        var addInfoDimensions = function (element) {
           // On mouseover, element is the current label_idx
           var box = element.node().getBBox();
           // infoBox is the .information rect
@@ -53,12 +65,16 @@
             info.attr("width", box.width + margin);
             infoTitleBg.attr("width", box.width + margin);
 
-            $('#mouseover_canvas #info-title').attr("dx", (box.width + margin) / 2 - infoTitleBox.width / 2);
+            $("#mouseover_canvas #info-title").attr(
+              "dx",
+              (box.width + margin) / 2 - infoTitleBox.width / 2
+            );
           }
         };
 
-        self.datasets.forEach(function(element, index){
-          focus.append("circle")
+        self.datasets.forEach(function (element, index) {
+          focus
+            .append("circle")
             .attr("r", 4.5)
             .attr("id", "circle_" + index)
             .attr("transform", "translate(" + self.margin_left + ",0)");
@@ -67,14 +83,14 @@
         function mousemove() {
           var _this = this;
 
-          $('#mouseover_canvas .chart_values').detach().remove();
-          $('#mouseover_canvas .chart_circles').detach().remove();
+          $("#mouseover_canvas .chart_values").detach().remove();
+          $("#mouseover_canvas .chart_circles").detach().remove();
           info.attr("height", infoTitleBg.node().getBBox().height + 10);
           info.attr("width", 1);
           infoTitle.attr("width", 1);
 
           var elementsForLegend = [];
-          self.datasets.forEach(function(element, index){
+          self.datasets.forEach(function (element, index) {
             var data = element.values;
             var name = element.name;
 
@@ -84,58 +100,63 @@
               d1 = data[i];
 
             if (d0 !== undefined && d1 !== undefined) {
-                var d = x0 - d0.x > d1.x - x0 ? d1 : d0;
+              var d = x0 - d0.x > d1.x - x0 ? d1 : d0;
             } else if (d0 !== undefined) {
-                var d = d0;
+              var d = d0;
             } else if (d1 !== undefined) {
-                var d = d1;
+              var d = d1;
             } else {
-                return;
+              return;
             }
 
-            focus.select("#circle_" + index)
+            focus
+              .select("#circle_" + index)
               .attr("cx", x(d.x))
               .attr("cy", y(d.y))
               .style("fill", self.color(name));
 
             var canvasPosition = x(x0) > self.width / 2 ? 50 : self.width / 2;
 
-            canvas
-              .attr("transform", "translate(" + canvasPosition + ",0)");
+            canvas.attr("transform", "translate(" + canvasPosition + ",0)");
 
-            canvas.select("#info-title")
-              .text(d.date);
+            canvas.select("#info-title").text(d.date);
 
-            elementsForLegend.push({element: element, d: d});
+            elementsForLegend.push({ element: element, d: d });
           });
 
           elementsForLegend.sort(function (a, b) {
-              return a.d.y > b.d.y ? -1 : (a.d.y < b.d.y ? 1 : 0);
+            return a.d.y > b.d.y ? -1 : a.d.y < b.d.y ? 1 : 0;
           });
 
           // Limit the number of legend items (document largest values only)
-          elementsForLegend.slice(0,10).forEach(function(element, index) {
-              canvas.append("circle")
-                  .attr("r", 5.5)
-                  .attr("cx", 15)
-                  .attr("cy", (index + 2) * 25)
-                  .attr("class", "chart_circles")
-                  .style("fill", self.color(element.element.name))
-                  .style("stroke", "black")
-
-              var text = canvas.append("text")
-                  .attr("y", (index + 2) * 25)
-                  .attr("x", 25)
-                  .attr("cx", 25)
-                  .attr("dy", ".35em")
-                  .attr("class", "chart_values")
-                  .attr("id", "label_" + index)
-                  .text(element.d === undefined ? element.element.name : helper.formatValueDisplay(element.element.name, element.d));
-
-              addInfoDimensions(text);
+          elementsForLegend.slice(0, 10).forEach(function (element, index) {
+            canvas
+              .append("circle")
+              .attr("r", 5.5)
+              .attr("cx", 15)
+              .attr("cy", (index + 2) * 25)
+              .attr("class", "chart_circles")
+              .style("fill", self.color(element.element.name))
+              .style("stroke", "black");
+
+            var text = canvas
+              .append("text")
+              .attr("y", (index + 2) * 25)
+              .attr("x", 25)
+              .attr("cx", 25)
+              .attr("dy", ".35em")
+              .attr("class", "chart_values")
+              .attr("id", "label_" + index)
+              .text(
+                element.d === undefined
+                  ? element.element.name
+                  : helper.formatValueDisplay(element.element.name, element.d)
+              );
+
+            addInfoDimensions(text);
           });
         }
-      }
+      },
     };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);
diff --git a/app/assets/javascripts/kanaui/kiddo/helper.js b/app/assets/javascripts/kanaui/kiddo/helper.js
index 8530f61..967a282 100644
--- a/app/assets/javascripts/kanaui/kiddo/helper.js
+++ b/app/assets/javascripts/kanaui/kiddo/helper.js
@@ -1,16 +1,20 @@
-;(function(Kiddo, d3){
-  Kiddo.Helper = function(){
-    var formatCurrency = function(d) { return "$" + formatValue(d); };
+(function (Kiddo, d3) {
+  Kiddo.Helper = function () {
+    var formatCurrency = function (d) {
+      return "$" + formatValue(d);
+    };
     var formatValue = d3.format(",.2f");
 
     return {
       parseDate: d3.time.format("%Y-%m-%d").parse,
-      bisectDate: d3.bisector(function(d) { return d.x; }).left,
+      bisectDate: d3.bisector(function (d) {
+        return d.x;
+      }).left,
       formatCurrency: formatCurrency,
       formatValue: formatValue,
-      formatValueDisplay: function(name, d) {
+      formatValueDisplay: function (name, d) {
         return name + ": " + formatValue(d.y); // Add currency boolean on backend later -- formatCurrency(d.y); }
-      }
-    }
+      },
+    };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);
diff --git a/app/assets/javascripts/kanaui/kiddo/kiddo_initialize.js b/app/assets/javascripts/kanaui/kiddo/kiddo_initialize.js
index 8dc9ea0..85b8332 100644
--- a/app/assets/javascripts/kanaui/kiddo/kiddo_initialize.js
+++ b/app/assets/javascripts/kanaui/kiddo/kiddo_initialize.js
@@ -1,11 +1,13 @@
-;(function(d3, $, window, document, undefined){
-  $(document).ready(function(){
-    if($('#chartAnchor').length == 0) { return; }
+(function (d3, $, window, document, undefined) {
+  $(document).ready(function () {
+    if ($("#chartAnchor").length == 0) {
+      return;
+    }
 
-    d3.json($('#chartAnchor').data('reports-path'), function(error, json){
-      $('#loading-spinner').remove();
+    d3.json($("#chartAnchor").data("reports-path"), function (error, json) {
+      $("#loading-spinner").remove();
 
-      var renderer = new Kiddo.Renderer('#chartAnchor');
+      var renderer = new Kiddo.Renderer("#chartAnchor");
 
       if (error) {
         ajaxErrorAlert(error);
@@ -14,34 +16,36 @@
 
       var data = json[0];
 
-      if (data === undefined ||
-          data.data === undefined ||
-          data.data.length == 0) {
+      if (
+        data === undefined ||
+        data.data === undefined ||
+        data.data.length == 0
+      ) {
         return renderer.noData();
       }
 
-      var render = function(type){
-        switch(type){
-          case 'COUNTERS':
+      var render = function (type) {
+        switch (type) {
+          case "COUNTERS":
             renderer.pieChart(data);
             break;
-          case 'TIMELINE':
+          case "TIMELINE":
             renderer.lineChart(data);
             // Date controls only make sense for timelines
-            $('#date-controls').show();
+            $("#date-controls").show();
             break;
-          case 'TABLE':
+          case "TABLE":
             renderer.table(data);
             break;
           default:
-            console.log('No such type implemented: ' + type);
+            console.log("No such type implemented: " + type);
             renderer.noData();
         }
       };
 
-      try{
+      try {
         render(data.type);
-      } catch (ex){
+      } catch (ex) {
         console.log(ex);
         renderer.noData();
       }
diff --git a/app/assets/javascripts/kanaui/kiddo/renderer.js b/app/assets/javascripts/kanaui/kiddo/renderer.js
index f9dfc4f..cff1985 100644
--- a/app/assets/javascripts/kanaui/kiddo/renderer.js
+++ b/app/assets/javascripts/kanaui/kiddo/renderer.js
@@ -1,39 +1,47 @@
-;(function(Kiddo, d3){
-  Kiddo.Renderer = function(selector){
+(function (Kiddo, d3) {
+  Kiddo.Renderer = function (selector) {
     this.element = d3.select(selector);
 
     var settings = Kiddo.Settings.apply(this);
     var helper = new Kiddo.Helper();
 
     var svg = this.element
-      .append('svg')
-        .attr('width', settings.raw_width)
-        .attr('height', settings.raw_height)
-        .attr('style', 'overflow: visible')
-      .append('g')
-        .attr('transform', 'translate(' + settings.margin_left + ',' + settings.margin_top + ')');
+      .append("svg")
+      .attr("width", settings.raw_width)
+      .attr("height", settings.raw_height)
+      .attr("style", "overflow: visible")
+      .append("g")
+      .attr(
+        "transform",
+        "translate(" + settings.margin_left + "," + settings.margin_top + ")"
+      );
 
     return {
-      lineChart: function(data){
+      lineChart: function (data) {
         var chart = Kiddo.LineChart.apply(settings);
         chart.render(svg, data);
       },
 
-      pieChart: function(data){var chart = Kiddo.PieChart.apply(settings);
+      pieChart: function (data) {
+        var chart = Kiddo.PieChart.apply(settings);
         chart.render(svg, data);
       },
 
-      table: function(data){
+      table: function (data) {
         svg.node().parentNode.remove();
-        new ReportsDataTables(null).buildTable(data['data'][0], $(selector));
+        new ReportsDataTables(null).buildTable(data["data"][0], $(selector));
       },
 
-      noData: function(){
-        svg.append('text')
-          .attr('class', 'chart-info')
-          .attr('transform', 'translate(' + settings.width / 2 + ',' + settings.height / 2 + ')')
-          .text('No data to display.');
-      }
+      noData: function () {
+        svg
+          .append("text")
+          .attr("class", "chart-info")
+          .attr(
+            "transform",
+            "translate(" + settings.width / 2 + "," + settings.height / 2 + ")"
+          )
+          .text("No data to display.");
+      },
     };
   };
-})(window.Kiddo = window.Kiddo || {}, d3);
+})((window.Kiddo = window.Kiddo || {}), d3);
diff --git a/app/assets/javascripts/kanaui/kiddo/settings.js b/app/assets/javascripts/kanaui/kiddo/settings.js
index 15fb194..c061ee1 100644
--- a/app/assets/javascripts/kanaui/kiddo/settings.js
+++ b/app/assets/javascripts/kanaui/kiddo/settings.js
@@ -1,10 +1,13 @@
-;(function(Kiddo, d3){
-  Kiddo.Settings = function(){
-    var margin_top =  30,
+(function (Kiddo, d3) {
+  Kiddo.Settings = function () {
+    var margin_top = 30,
       margin_bottom = 40,
       margin_left = 50,
       margin_right = 150,
-      raw_width = parseInt(this.element.node().getBoundingClientRect().width, 10),
+      raw_width = parseInt(
+        this.element.node().getBoundingClientRect().width,
+        10
+      ),
       raw_height = 500;
 
     return {
@@ -15,7 +18,7 @@
       raw_width: raw_width,
       raw_height: raw_height,
       width: raw_width - margin_left - margin_right,
-      height: raw_height - margin_top - margin_bottom
-    }
+      height: raw_height - margin_top - margin_bottom,
+    };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);
diff --git a/app/assets/javascripts/kanaui/reports.dataTables.js b/app/assets/javascripts/kanaui/reports.dataTables.js
index 1fc277e..9ef85f1 100644
--- a/app/assets/javascripts/kanaui/reports.dataTables.js
+++ b/app/assets/javascripts/kanaui/reports.dataTables.js
@@ -1,127 +1,153 @@
 function ReportsDataTables(reports) {
-    this.reports = reports;
+  this.reports = reports;
 }
 
-ReportsDataTables.prototype.build = function(data, id, wrapper) {
-    log.debug('Building dataTable for id ' + id);
-    log.trace(data);
-
-    var dataTableWrapper = $('<div class="dataTableWrapper" id="dataTableWrapper-' + id + '"><h3>' + data['name'] + '</h3></div>');
-    wrapper.append(dataTableWrapper);
-
-    var dataTable = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable-' + id + '"></table>');
-    dataTableWrapper.append(dataTable);
-
-    var aaData = [];
-    for (var i in data['values']) {
-        aaData.push([data.values[i]['x'], data.values[i]['y']])
-    }
-
-    dataTable.DataTable({
-        "aaData": aaData,
-        "aoColumns": [
-            { "sTitle": "Date" },
-            { "sTitle": "Value" },
-        ]
+ReportsDataTables.prototype.build = function (data, id, wrapper) {
+  log.debug("Building dataTable for id " + id);
+  log.trace(data);
+
+  var dataTableWrapper = $(
+    '<div class="dataTableWrapper" id="dataTableWrapper-' +
+      id +
+      '"><h3>' +
+      data["name"] +
+      "</h3></div>"
+  );
+  wrapper.append(dataTableWrapper);
+
+  var dataTable = $(
+    '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable-' +
+      id +
+      '"></table>'
+  );
+  dataTableWrapper.append(dataTable);
+
+  var aaData = [];
+  for (var i in data["values"]) {
+    aaData.push([data.values[i]["x"], data.values[i]["y"]]);
+  }
+
+  dataTable.DataTable({
+    aaData: aaData,
+    aoColumns: [{ sTitle: "Date" }, { sTitle: "Value" }],
+  });
+};
+
+ReportsDataTables.prototype.buildTable = function (data, wrapper) {
+  var id = data["name"];
+  var dataTableWrapper = $(
+    '<div class="dataTableWrapper" id="dataTableWrapper-' + id + '"></div>'
+  );
+  wrapper.append(dataTableWrapper);
+
+  var dataTable = $(
+    '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable-' +
+      id +
+      '"></table>'
+  );
+  dataTableWrapper.append(dataTable);
+
+  var aaData = [];
+  for (var i in data["values"]) {
+    aaData.push(data["values"][i]);
+  }
+
+  var aoColumns = [];
+  var columnsVisible = [];
+  for (var i in data["header"]) {
+    var isVisible = isColumnVisible(data["header"][i]);
+    aoColumns.push({
+      sTitle: data["header"][i],
+      name: data["header"][i],
+      visible: isVisible,
     });
-}
+    if (isVisible) {
+      columnsVisible.push(data["header"][i]);
+    }
+  }
 
-ReportsDataTables.prototype.buildTable = function(data, wrapper) {
-    var id = data['name'];
-    var dataTableWrapper = $('<div class="dataTableWrapper" id="dataTableWrapper-' + id + '"></h3></div>');
-    wrapper.append(dataTableWrapper);
+  dataTable.DataTable({
+    aaData: aaData,
+    aoColumns: aoColumns,
+    scrollX: true,
+    sDom: 'C<"clear">lfrtip',
+  });
 
-    var dataTable = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable-' + id + '"></table>');
-    dataTableWrapper.append(dataTable);
+  dataTable.on("column-visibility.dt", function (e, settings, column, state) {
+    setColumnVisible(settings.aoColumns[column].name, state);
+  });
 
-    var aaData = [];
-    for (var i in data['values']) {
-        aaData.push(data['values'][i])
-    }
+  $("#copy-url").click(function (e) {
+    var pathPlusParams = $(this).data("reports-path");
+    var sPageURL = decodeURIComponent(pathPlusParams.substring(1)).split("?");
+    var params = sPageURL[1].split("&");
 
-    var aoColumns = [];
-    var columnsVisible = [];
-    for (var i in data['header']) {
-        var isVisible =  isColumnVisible(data['header'][i]);
-        aoColumns.push({ "sTitle": data['header'][i], "name": data['header'][i], "visible": isVisible })
-        if (isVisible) {
-            columnsVisible.push(data['header'][i]);
-        }
+    var columnsVisible = $("#visible-table-columns").val();
+    var placeholder = $("#url-placeholder");
+
+    var urlToShare = window.location.origin + "/" + sPageURL[0] + "?";
+    for (var i in params) {
+      var keyValue = params[i].split("=");
+      if (keyValue[0] == "columns") {
+        continue;
+      }
+      urlToShare += "&" + params[i];
     }
 
-    dataTable.DataTable({
-        "aaData": aaData,
-        "aoColumns": aoColumns,
-        "scrollX": true,
-        "sDom": 'C<"clear">lfrtip'
-    });
+    placeholder.val(urlToShare + "&columns=" + columnsVisible);
+    placeholder.removeClass("hidden");
+    placeholder.select();
 
-    dataTable.on( 'column-visibility.dt', function ( e, settings, column, state ) {
-        setColumnVisible(settings.aoColumns[column].name, state);
-    });
+    document.execCommand("Copy");
+    placeholder.addClass("hidden");
+    alert("URL copied into the clipboard!");
+  });
 
-    $("#copy-url").click(function(e){
-        var pathPlusParams = $(this).data("reports-path");
-        var sPageURL = decodeURIComponent(pathPlusParams.substring(1)).split('?');
-        var params = sPageURL[1].split('&');
-
-        var columnsVisible = $("#visible-table-columns").val();
-        var placeholder = $("#url-placeholder");
-
-        var urlToShare = window.location.origin + "/" + sPageURL[0] + "?";
-        for (var i in params) {
-            var keyValue = params[i].split('=');
-            if (keyValue[0] == 'columns') {
-                continue;
-            }
-            urlToShare += "&" + params[i];
-        }
-
-        placeholder.val(urlToShare + "&columns=" + columnsVisible);
-        placeholder.removeClass("hidden");
-        placeholder.select();
-
-        document.execCommand("Copy");
-        placeholder.addClass("hidden");
-        alert("URL copied into the clipboard!")
-    });
+  $("#visible-table-columns").val(columnsVisible.join());
+};
 
-    $("#visible-table-columns").val(columnsVisible.join());
-}
-
-ReportsDataTables.prototype.buildCSVURL = function(position) {
-    return this.reports.buildDataURL(position, 'csv');
-}
+ReportsDataTables.prototype.buildCSVURL = function (position) {
+  return this.reports.buildDataURL(position, "csv");
+};
 function setColumnVisible(column, isVisible) {
-    var columnsVisible = $("#visible-table-columns").val();
-    if (columnsVisible == undefined || columnsVisible == null || columnsVisible.length == 0) {
-        columnsVisible = [];
-    } else {
-        columnsVisible = (columnsVisible).split(",");
-    }
-
-    var columnIndex = columnsVisible.indexOf(column);
-    if (isVisible && columnIndex == -1) {
-        columnsVisible.push(column);
-    } else if (!isVisible && columnIndex != -1) {
-        columnsVisible.splice(columnIndex, 1);
-    }
-
-    $("#visible-table-columns").val(columnsVisible.join());
+  var columnsVisible = $("#visible-table-columns").val();
+  if (
+    columnsVisible == undefined ||
+    columnsVisible == null ||
+    columnsVisible.length == 0
+  ) {
+    columnsVisible = [];
+  } else {
+    columnsVisible = columnsVisible.split(",");
+  }
+
+  var columnIndex = columnsVisible.indexOf(column);
+  if (isVisible && columnIndex == -1) {
+    columnsVisible.push(column);
+  } else if (!isVisible && columnIndex != -1) {
+    columnsVisible.splice(columnIndex, 1);
+  }
+
+  $("#visible-table-columns").val(columnsVisible.join());
 }
 
 function isColumnVisible(column) {
-    var columnsVisible = $("#visible-table-columns").val();
-    if ((columnsVisible == undefined || columnsVisible == null || columnsVisible.length == 0) && column != 'tenant_record_id') {
-        return true;
-    }
-    columnsVisible = (columnsVisible).split(",");
-
-    for (var i in columnsVisible) {
-        if (columnsVisible[i] == column) {
-            return true;
-        }
+  var columnsVisible = $("#visible-table-columns").val();
+  if (
+    (columnsVisible == undefined ||
+      columnsVisible == null ||
+      columnsVisible.length == 0) &&
+    column != "tenant_record_id"
+  ) {
+    return true;
+  }
+  columnsVisible = columnsVisible.split(",");
+
+  for (var i in columnsVisible) {
+    if (columnsVisible[i] == column) {
+      return true;
     }
+  }
 
-    return false;
+  return false;
 }
diff --git a/app/assets/stylesheets/kanaui/kanaui.css b/app/assets/stylesheets/kanaui/kanaui.css
index e8b0f4c..fc3cd73 100644
--- a/app/assets/stylesheets/kanaui/kanaui.css
+++ b/app/assets/stylesheets/kanaui/kanaui.css
@@ -4,3 +4,770 @@
  * the top of the compiled file, but it's generally better to create a new file per style scope.
  *= require_tree .
 */
+
+.kenui-analytics-dashboard-index .analytics-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 0;
+  border-bottom: 0.0625rem solid #e9eaeb;
+}
+
+.kenui-analytics-dashboard-index .analytics-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 2.5rem;
+  color: #414651;
+  margin-bottom: 1.25rem;
+}
+
+.kenui-analytics-dashboard-index .trigger-invoice-box button {
+  margin-left: 0.3125rem;
+  padding: 0.5rem 1rem;
+}
+
+.kenui-analytics-dashboard-index .refresh-button {
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.kenui-analytics-dashboard-index .refresh-button img {
+  filter: brightness(0) saturate(100%) invert(78%) sepia(47%) saturate(491%)
+    hue-rotate(170deg) brightness(100%) contrast(102%);
+}
+
+.kenui-analytics-dashboard-index .custom-date-input-wrapper {
+  padding: 0 0.625rem !important;
+  border: 0.0625rem solid #d5d7da !important;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  max-width: 8.5rem;
+}
+
+.kenui-analytics-dashboard-index .custom-date-input-wrapper svg {
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+}
+
+.kenui-analytics-dashboard-index .custom-date-input-wrapper input {
+  border: none;
+  outline: none;
+  box-shadow: none;
+  padding: 0 !important;
+  font-size: 1rem;
+  color: #6b7280;
+  height: 2.5rem;
+}
+
+.kenui-analytics-dashboard-index .custom-date-input-wrapper input::placeholder {
+  color: #717680;
+}
+
+.kenui-analytics-dashboard-index .custom-date-input-wrapper input.form-control {
+  border: none;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+.kenui-analytics-dashboard-index select.form-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: block;
+  height: 2.5rem;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0.0625rem solid #ced4da;
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 6L8 10L12 6' stroke='%23A4A7AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+  padding-right: 1.875rem;
+  max-width: 10rem;
+}
+
+.kenui-analytics-dashboard-index select.form-select:focus {
+  box-shadow: none;
+  outline: none;
+  border-color: #1570ef;
+}
+
+.kenui-analytics-dashboard-index .well ul {
+  list-style-type: none;
+  margin-top: 0.625rem;
+  background: #fafafa;
+  width: fit-content;
+  padding: 0.625rem;
+  border-radius: 0.5rem;
+}
+
+.kenui-analytics-dashboard-index .well ul li a {
+  color: #717680;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-decoration: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: auto;
+  padding: 0.625rem;
+}
+
+.kenui-analytics-dashboard-index .analytics-header b,
+.kenui-analytics-dashboard-index .analytics-header b a {
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+}
+
+.kenui-analytics-dashboard-index .custom-tabs {
+  background-color: #fafafa;
+  border: 0.0625rem solid #e9eaeb;
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-bottom: 1.5rem;
+  padding: 0.25rem;
+  width: fit-content;
+  height: 2.5rem;
+}
+
+.kenui-analytics-dashboard-index .custom-tabs a.custom-tab {
+  background: transparent;
+  border: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #717680;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.kenui-analytics-dashboard-index .custom-tabs .activelink {
+  color: #414651 !important;
+  background-color: #ffffff !important;
+  box-shadow: 0 0.0625rem 0.188rem rgba(10, 13, 18, 0.1);
+}
+
+.kenui-analytics-dashboard-index #chartAnchor {
+  background: #ffffff;
+}
+
+.kenui-analytics-dashboard-index #chartAnchor svg {
+  background: #ffffff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.kenui-analytics-dashboard-index .grid line {
+  stroke: transparent;
+  stroke-width: 0.0625rem;
+  stroke-opacity: 1;
+  shape-rendering: crispEdges;
+}
+
+.kenui-analytics-dashboard-index .grid:nth-of-type(2) line {
+  stroke: #f3f4f6;
+  stroke-opacity: 0.6;
+}
+
+.kenui-analytics-dashboard-index .grid path {
+  stroke: none;
+  fill: none;
+}
+
+.kenui-analytics-dashboard-index .axis line,
+.kenui-analytics-dashboard-index .axis path {
+  stroke: #f5f5f5;
+  stroke-width: 0.0625rem;
+  shape-rendering: crispEdges;
+}
+
+.kenui-analytics-dashboard-index .y.axis path {
+  stroke: transparent !important;
+  stroke-width: 0.0625rem;
+}
+
+.kenui-analytics-dashboard-index .y.axis line,
+.kenui-analytics-dashboard-index .y.axis path {
+  stroke: #f5f5f5;
+  stroke-width: 0.0625rem;
+}
+
+.kenui-analytics-dashboard-index .axis text {
+  font-size: 0.75rem;
+  fill: #6b7280;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.kenui-analytics-dashboard-index .line {
+  fill: none;
+  stroke-width: 0.125rem;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.kenui-analytics-dashboard-index .chart-legend {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.kenui-analytics-dashboard-index .chart-legend circle {
+  stroke: none;
+}
+
+.kenui-analytics-dashboard-index .information {
+  fill: #ffffff;
+  stroke: #f5f5f5;
+  stroke-width: 0.0625rem;
+  filter: drop-shadow(0 0.25rem 0.375rem rgba(0, 0, 0, 0.1));
+  rx: 0.25rem;
+}
+
+.kenui-analytics-dashboard-index .info-title__bg {
+  fill: #f9fafb;
+  stroke: #f5f5f5;
+  stroke-width: 0.0625rem;
+  rx: 0.25rem 0.25rem 0 0;
+}
+
+.kenui-analytics-dashboard-index .info-title {
+  font-size: 1rem;
+  font-weight: 600;
+  fill: #374151;
+}
+
+/* app/views/kanaui/reports/edit.html.erb */
+
+.kanaui-reports-edit .new-report-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1b1c1e;
+  padding: 1.5rem 0;
+}
+
+.kanaui-reports-edit .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #d5d7da;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.kanaui-reports-edit .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.kanaui-reports-edit .form-control {
+  border-radius: 6px;
+}
+
+.kanaui-reports-edit .form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+  padding-right: 1.875rem;
+}
+
+.kanaui-reports-edit select.form-control:focus {
+  border-color: #1570ef !important;
+  box-shadow: none;
+  outline: none;
+}
+
+.kanaui-reports-edit .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.kanaui-reports-edit textarea.form-control {
+  height: 10rem !important;
+}
+
+.kanaui-reports-edit textarea.form-control:focus {
+  border-color: #1570ef !important;
+  outline: 0 !important;
+  box-shadow: none !important;
+}
+
+.kanaui-reports-edit .form-group span {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #535862;
+}
+
+/* app/views/kanaui/reports/index.html.erb */
+
+.kanaui-reports-index .configured-reports {
+  max-width: 80rem;
+  width: 100%;
+}
+
+.kanaui-reports-index .configured-reports .configured-reports-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 0;
+  border-bottom: 0.0625rem solid #e9eaeb;
+}
+
+.kanaui-reports-index .configured-reports .configured-reports-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #414651;
+  margin-bottom: 1.25rem;
+}
+
+.kanaui-reports-index th {
+  padding: 0.375rem 1.625rem 0.375rem 0.75rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  letter-spacing: 0;
+  color: #717680;
+  text-transform: capitalize;
+}
+
+.kanaui-reports-index td {
+  font-weight: 500 !important;
+  font-size: 0.875rem !important;
+  padding: 1rem 0.5rem !important;
+  line-height: 1.125rem !important;
+  text-align: start;
+  color: #535862 !important;
+  text-transform: capitalize !important;
+}
+
+.kanaui-reports-index td a {
+  color: #175cd3 !important;
+}
+
+.kanaui-reports-index .table-button {
+  background-color: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  flex-direction: row-reverse;
+  text-transform: capitalize;
+  gap: 0.0625rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  margin-left: 0.75rem;
+  text-decoration: none;
+}
+
+.kanaui-reports-index .delete-button {
+  color: #d92d20 !important;
+}
+
+.kanaui-reports-index .edit-button {
+  color: #535862 !important;
+}
+
+.kanaui-reports-index .refresh-button {
+  color: #175cd3 !important;
+}
+
+.kanaui-reports-index .modal-content {
+  border-radius: 1rem;
+  min-width: 40.5rem;
+}
+
+.kanaui-reports-index .modal-body {
+  padding-bottom: 0.375rem !important;
+  padding-top: 1.25rem !important;
+}
+
+.kanaui-reports-index .modal-header {
+  padding: 1.5rem 1.5rem 1rem 1.5rem !important;
+}
+
+.kanaui-reports-index .modal-footer {
+  padding: 1rem 1.5rem 1.5rem 1.5rem !important;
+}
+
+.kanaui-reports-index .modal-title {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #181d27;
+}
+
+.kanaui-reports-index .close-button {
+  background: transparent;
+  padding: 0;
+  margin-top: -1.25rem;
+}
+
+.kanaui-reports-index .close-button:hover {
+  background: transparent;
+  padding: 0;
+}
+
+.kanaui-reports-index .modal-header .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #d5d7da;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.kanaui-reports-index .modal-header .icon-container img {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.kanaui-reports-index .dataTables_wrapper.no-footer .dataTables_scrollBody {
+  border-bottom: none !important;
+}
+
+.kanaui-reports-index p {
+  margin-bottom: 0 !important;
+}
+
+.kanaui-reports-index pre {
+  padding: 0.625rem;
+  background: #f4f4f4;
+  border-radius: 0.5rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* app/views/kanaui/reports/new.html.erb */
+
+.kanaui-reports-new .new-report-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1b1c1e;
+  padding: 1.5rem 0;
+}
+
+.kanaui-reports-new .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #d5d7da;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.kanaui-reports-new .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.kanaui-reports-new .form-control {
+  border-radius: 0.375rem;
+}
+
+.kanaui-reports-new .form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+  padding-right: 1.875rem;
+}
+
+.kanaui-reports-new select.form-control:focus {
+  border-color: #1570ef !important;
+  box-shadow: none;
+  outline: none;
+}
+
+.kanaui-reports-new .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.kanaui-reports-new textarea.form-control {
+  height: 10rem !important;
+}
+
+.kanaui-reports-new textarea.form-control:focus {
+  border-color: #1570ef !important;
+  outline: 0 !important;
+  box-shadow: none !important;
+}
+
+.kanaui-reports-new .form-group span {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #535862;
+}
+
+/* app/views/kanaui/settings/index.html.erb */
+
+.kanaui-settings-index .analytics-settings-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1b1c1e;
+  padding: 1.5rem 0;
+}
+
+.kanaui-settings-index .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #d5d7da;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.kanaui-settings-index .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.kanaui-settings-index .form-control {
+  border-radius: 0.375rem;
+}
+
+.kanaui-settings-index .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.kenui-analytics-dashboard-index li.advanced-controls span {
+  color: #717680;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: auto;
+  padding: 0.625rem;
+}
+
+/* Advanced Controls - Slicing & Dicing Section */
+.kenui-analytics-dashboard-index .advanced-controls {
+  margin: 0.625rem 0;
+  padding: 0;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls .form-horizontal {
+  background: #fafafa;
+  border: 0.0625rem solid #e9eaeb;
+  border-radius: 0.5rem;
+  padding: 0.625rem;
+  margin-top: 0.625rem;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls legend {
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: #414651;
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: auto;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls .form-group {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls .control-label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  margin: 0;
+  min-width: 100%;
+  flex-shrink: 0;
+}
+
+.url-placeholder-input {
+  max-width: 10rem;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls .col-sm-10 {
+  min-width: 100%;
+  flex: 1;
+  padding: 0;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls select.form-control {
+  height: 6rem;
+  min-width: 16rem;
+  width: 100%;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls select.form-control:focus {
+  border-color: #1570ef;
+  box-shadow: 0 0 0 0.125rem rgba(21, 112, 239, 0.25);
+  outline: none;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls .col-sm-offset-2 {
+  margin-left: 0;
+  margin-top: 0.625rem;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls .btn-default {
+  background-color: #1570ef;
+  border: 0.0625rem solid #1570ef;
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: 0.375rem;
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls .btn-default:hover {
+  background-color: #0d5bb8;
+  border-color: #0d5bb8;
+  color: #ffffff;
+}
+
+.kenui-analytics-dashboard-index .advanced-controls .btn-default:focus {
+  box-shadow: 0 0 0 0.125rem rgba(21, 112, 239, 0.25);
+  outline: none;
+}
+
+/* Current Analytics Query Section */
+.kenui-analytics-dashboard-index .well ul li:has(.query-label) {
+  background: #f8f9fa;
+  border: 0.0625rem solid #e9eaeb;
+  border-radius: 0.5rem;
+  padding: 0.625rem;
+  margin: 0.625rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.kenui-analytics-dashboard-index .well ul li:has(.query-label) a {
+  color: #1570ef;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: color 0.15s ease-in-out;
+}
+
+.kenui-analytics-dashboard-index .well ul li:has(.query-label) a:hover {
+  color: #0d5bb8;
+  text-decoration: underline;
+}
+
+.kenui-analytics-dashboard-index .well ul li:has(.query-label) pre {
+  background: #ffffff;
+  border: 0.0625rem solid #d5d7da;
+  border-radius: 0.375rem;
+  padding: 0.625rem;
+  margin: 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: #374151;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
+}
+
+.kenui-analytics-dashboard-index .well ul li:has(.query-label) .query-label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  margin: 0;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+  .kenui-analytics-dashboard-index .advanced-controls .form-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.625rem;
+  }
+  
+  .kenui-analytics-dashboard-index .advanced-controls .control-label {
+    min-width: auto;
+    width: 100%;
+  }
+  
+  .kenui-analytics-dashboard-index .advanced-controls .col-sm-10 {
+    width: 100%;
+  }
+  
+  .kenui-analytics-dashboard-index .well ul li:has(.query-label) pre {
+    font-size: 0.75rem;
+    padding: 0.5rem 0.75rem;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/kanaui/reports.css b/app/assets/stylesheets/kanaui/reports.css
index 06d0b74..2da896a 100644
--- a/app/assets/stylesheets/kanaui/reports.css
+++ b/app/assets/stylesheets/kanaui/reports.css
@@ -57,9 +57,23 @@
   fill: #202020;
 }
 
-.chart-title{
-  padding: 20px;
-  text-indent: 30px;
+.chart-title-container {
+  height: 31.25rem;  
+  width: 1.25rem; 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.chart-title {
+  font-weight: 500;
+  font-size: 0.75rem;    
+  line-height: 1.125rem; 
+  text-align: center;
+  color: #535862;
+  white-space: nowrap;
+  transform: rotate(-90deg);
 }
 
 .nav-element.current{
diff --git a/app/controllers/kanaui/dashboard_controller.rb b/app/controllers/kanaui/dashboard_controller.rb
index 24bf770..bdfd1c5 100644
--- a/app/controllers/kanaui/dashboard_controller.rb
+++ b/app/controllers/kanaui/dashboard_controller.rb
@@ -19,6 +19,22 @@ def index
       @reports = JSON.parse(raw_reports)
       @report = current_report(@reports) || {}
 
+      # If no report name is provided, redirect to the default (second) report
+      if @raw_name.blank? && @reports.is_a?(Array) && @reports[1].present?
+        default_name = @reports[1]['reportName']
+        query_params = { start_date: @start_date,
+                         end_date: @end_date,
+                         name: default_name,
+                         smooth: params[:smooth],
+                         sql_only: params[:sql_only],
+                         format: params[:format] }
+
+        query_params[:fake] = params[:fake] unless params[:fake].blank?
+        query_params[:type] = params[:type] unless params[:type].blank?
+
+        redirect_to dashboard_index_path(query_params) and return
+      end
+
       query = build_slice_and_dice_query
 
       # get columns visibility from query parameters to be used by tables
diff --git a/app/views/kanaui/dashboard/index.html.erb b/app/views/kanaui/dashboard/index.html.erb
index c1da0ee..ba9ea43 100644
--- a/app/views/kanaui/dashboard/index.html.erb
+++ b/app/views/kanaui/dashboard/index.html.erb
@@ -1,193 +1,316 @@
-<div class="flex-panel">
-  <!--             MENU        -->
-  <div class="reports-options flex-inner-left-panel">
-    <div class="row">
-    <div class="col-md-12 col-sm-8">
-    <div class="calendar-container">
-      <span class="calendar-icon"><i class="fa fa-calendar"></i><i class="fa fa-caret-down"></i></span>
-      <% if params[:name] %>
-        <div class="form-container">
-          <%= form_tag kanaui_engine.dashboard_index_path, :class => 'form-horizontal', :method => :get do %>
-              <input name="name" type="hidden" value="<%= @raw_name %>">
-              <input name="smooth" type="hidden" value="<%= params[:smooth] %>">
-              <input name="sql_only" type="hidden" value="<%= params[:sql_only] %>">
-              <input name="format" type="hidden" value="<%= params[:format] %>">
-              <input name="delta_days" type="hidden" value="<%= (@end_date.to_date - @start_date.to_date).to_i %>">
-              <div class="form-group">
-                <div id="dp1" class="col-md-7">
-                  From:<input class="form-control datepicker" name="start_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true" value="<%= @start_date %>">
-                </div>
-              </div>
-              <div class="form-group">
-                <div class="col-md-7">
-                  To:<input class="form-control" name="end_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true" value="<%= @end_date %>">
-                </div>
-              </div>
-              <% ((@report['variables'] || {})['fields'] || []).each do |definition| %>
-                <div class="form-group">
-                  <div class="col-md-7">
-                    <%= definition['name'].titleize %>:
-                    <% # TODO Not fully implemented server side %>
-                    <% if definition['dataType'] == 'date' %>
-                      <% # TODO datepicker breaks :hover %>
-                      <input class="form-control" name="variable_<%= definition['name'] %>" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true" value=""/>
-                    <% else %>
-                      <input class="form-control" name="variable_<%= definition['name'] %>" type="text" value=""/>
-                    <% end %>
-                  </div>
-                </div>
-              <% end %>
-              <div class="form-group">
-                <div class="col-sm-12">
-                  <%= submit_tag 'Refresh', :class => 'btn btn-default' %>
-                </div>
-              </div>
-          <% end %>
-        </div>
-      <% end %>
-      </div>
-      <div class="col-md-12 col-sm-8">
-        <h4><%= link_to 'Available Reports', kanaui_engine.url_for(:controller => :reports) %></h4>
-          <ul class="nav nav-tabs nav-stacked">
-            <% if Rails.env.development? && @reports.empty? %>
-              <li class="nav-element">
-                <%= link_to "Fake pie", kanaui_engine.dashboard_index_path(:fake => 1, :name => 'fake_pie', :type => 'pie') %>
-              </li>
-              <li class="nav-element">
-                <%= link_to "Fake line", kanaui_engine.dashboard_index_path(:fake => 1, :name => 'fake_line', :type => 'line') %>
-              </li>
-            <% end %>
-          <% @reports.each do |r| %>
-            <% link = kanaui_engine.dashboard_index_path(params.to_h.merge(:name => r['reportName'])) %>
-            <li class="nav-element <%= params[:name] == r['reportName'] ? 'current' : '' %>">
-              <%= link_to r['reportPrettyName'], link, :class => "truncate-text", title: r['reportName'].titleize %>
-            </li>
-          <% end %>
-        </ul>
-      </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-12 col-sm-8">
-        <h5><%= link_to 'Settings', kanaui_engine.url_for(:controller => :settings) %></h5>
-      </div>
-    </div>
-  </div>
 
-  <!--             DASHBOARD        -->
-  <div class="flex-inner-right-panel">
-    <div class="row">
-      <div class="col-sm-12">
-        <% if params[:name] %>
-          <h2 class="chart-title">
-            <%= @raw_name.titleize %>
-          </h2>
-          <div id="loading-spinner"></div>
-          <div id="chartAnchor" data-reports-path="<%= kanaui_engine.reports_path(params.to_h) %>"></div>
-          <div id="date-controls" style="display: none;">
-            <ul class="nav nav-pills nav-justified">
-              <% @available_start_dates.each do |key, value| %>
-                <li><%= link_to key, kanaui_engine.dashboard_index_path(params.to_h.merge(:start_date => value)) %></li>
-              <% end %>
-            </ul>
-          </div>
-          <hr>
-          <div class="pull-right">
-            <% if @report['reportType'] == 'TABLE' %>
-              <input type="hidden" id="visible-table-columns" value="<%= @visible_columns %>">
-              <a class="btn btn-default" id="copy-url" data-reports-path="<%= kanaui_engine.dashboard_index_path(params.to_h) %>">Copy URL</a>
-              <input id="url-placeholder" class="form-control hidden">
-            <% end %>
-            <%= link_to 'Download raw data', kanaui_engine.reports_path(params.to_h.merge(:format => 'csv')), class: 'btn btn-default' %>
-          </div>
-          <a class="btn btn-default" role="button" data-toggle="collapse" href="#advanced-controls" aria-expanded="false" aria-controls="advanced-controls">
-            Advanced controls
-          </a>
-          <div class="collapse" id="advanced-controls">
-            <div class="well">
-              <ul>
-                <% if @report['reportType'] == 'TIMELINE' %>
-                  <% at_least_two_months = params[:start_date].blank? || params[:end_date].blank? || (params[:end_date].to_date.beginning_of_month - 1.month > params[:start_date].to_date) %>
-                  <% at_least_two_weeks = params[:start_date].blank? || params[:end_date].blank? || (params[:end_date].to_date.beginning_of_week - 1.week > params[:start_date].to_date) %>
-                  <% if params[:smooth] != 'AVERAGE_WEEKLY' && at_least_two_weeks %>
-                    <li><%= link_to 'Weekly average', kanaui_engine.dashboard_index_path(params.to_h.merge(:smooth => 'AVERAGE_WEEKLY')) %></li>
-                  <% end %>
-                  <% if params[:smooth] != 'AVERAGE_MONTHLY' && at_least_two_months %>
-                    <li><%= link_to 'Monthly average', kanaui_engine.dashboard_index_path(params.to_h.merge(:smooth => 'AVERAGE_MONTHLY')) %></li>
-                  <% end %>
-                  <% if params[:smooth] != 'SUM_WEEKLY' && at_least_two_weeks %>
-                    <li><%= link_to 'Weekly sum', kanaui_engine.dashboard_index_path(params.to_h.merge(:smooth => 'SUM_WEEKLY')) %></li>
-                  <% end %>
-                  <% if params[:smooth] != 'SUM_MONTHLY' && at_least_two_months %>
-                    <li><%= link_to 'Monthly sum', kanaui_engine.dashboard_index_path(params.to_h.merge(:smooth => 'SUM_MONTHLY')) %></li>
+<div class="kaui-container kenui-analytics-dashboard-index">
+  <%= render partial: 'kaui/components/breadcrumb/breadcrumb', locals: {
+    breadcrumbs: [
+      { label: 'Settings', href: '/' },
+      { label: "Analytics", href: '#' }
+    ]
+  } %>
+
+  <div class="d-flex" style="gap: 4rem;">
+    <%= render template: 'kaui/layouts/kaui_setting_sidebar', 
+      locals: {
+        identifier: "Settings",
+        controller: params[:controller],
+        menu_items: [
+          { label: 'Account', path: kaui_engine.admin_tenant_path(session[:tenant_id]), controller_suffix: "#{session[:tenant_id]}", icon_path: 'kaui/setting/account.svg' },
+          { label: 'Tenants', path: kaui_engine.admin_tenants_path, controller_suffix: 'admin_tenants', icon_path: 'kaui/setting/tenants.svg' },
+          { label: 'Users', path: kaui_engine.admin_allowed_users_path, controller_suffix: 'admin_allowed_users', icon_path: 'kaui/setting/users.svg' },
+          { label: 'Tags', path: kaui_engine.tags_path, controller_suffix: 'tags', icon_path: 'kaui/setting/tags.svg' },
+          { label: 'Tag Definitions', path: kaui_engine.tag_definitions_path, controller_suffix: 'tag_definitions', icon_path: 'kaui/setting/tag-definitions.svg' },
+          { label: 'Custom Fields', path: kaui_engine.custom_fields_path, controller_suffix: 'custom_fields', icon_path: 'kaui/setting/custom-field.svg' },
+          { label: 'Plugin Manager', path: "/kpm", controller_suffix: 'kpm', icon_path: 'kaui/setting/plugins.svg' },
+          { label: 'E-notifications', path: "/kenui", controller_suffix: 'kenui', icon_path: 'kaui/setting/e-notifications.svg' },
+          { label: 'Analytics', path: "/analytics", controller_suffix: 'analytics', icon_path: 'kaui/setting/analytics.svg' },
+        ]
+      }
+    %>
+
+    <div class="analytics w-100">
+      <div class="d-flex flex-column">
+        <div class="analytics-header">
+          <h2>Analytics</h2>
+          <span class="d-flex">
+            
+            <div class="d-flex align-items-center me-4">
+              <b class="me-2"><%= link_to 'Available Reports', kanaui_engine.url_for(:controller => :reports) %>:</b>
+              <% if Rails.env.development? && @reports.empty? %>
+                <ul class="">
+                  <li class="nav-element">
+                    <%= link_to "Fake pie", kanaui_engine.dashboard_index_path(fake: 1, name: 'fake_pie', type: 'pie') %>
+                  </li>
+                  <li class="nav-element">
+                    <%= link_to "Fake line", kanaui_engine.dashboard_index_path(fake: 1, name: 'fake_line', type: 'line') %>
+                  </li>
+                </ul>
+              <% else %>
+                <select class="form-select" id="report-select" onchange="goToReport(this.value);">
+                  <% @reports.each_with_index do |r, idx| %>
+                    <% report_link = kanaui_engine.dashboard_index_path(params.to_h.merge(name: r['reportName'])) %>
+                    <option value="<%= report_link %>" <%= 'selected' if @raw_name == r['reportName'] || (@raw_name.blank? && idx == 1) %>>
+                      <%= r['reportPrettyName'] %>
+                    </option>
                   <% end %>
-                <% end %>
-                <% filter_fields = ((@report['schema'] || {})['fields'] || []).select { |field| !field['distinctValues'].blank? && field['dataType'] =~ /char/ } # To ignore tenant_record_id %>
-                <% unless filter_fields.empty? %>
-                  <li>Slicing & Dicing:
-                    <%= form_tag kanaui_engine.dashboard_index_path(params.to_h), :method => :get, :class => 'form-horizontal' do %>
-                        <input name="start_date" type="hidden" value="<%= @start_date %>">
-                        <input name="end_date" type="hidden" value="<%= @end_date %>">
-                        <input name="name" type="hidden" value="<%= @raw_name %>">
-                        <input name="smooth" type="hidden" value="<%= params[:smooth] %>">
-                        <input name="sql_only" type="hidden" value="<%= params[:sql_only] %>">
-                        <input name="format" type="hidden" value="<%= params[:format] %>">
-
-                        <fieldset class="form-group">
-                          <legend>Filters</legend>
-                          <% filter_fields.each do |field| %>
-                              <div class="form-group">
-                                <%= label_tag "filter_#{field['name']}", field['name'], :class => 'col-sm-2 control-label' %>
-                                <div class="col-sm-10">
-                                  <%= select_tag "filter_#{field['name']}", options_for_select(field['distinctValues']), :multiple => true, :class => 'form-control' %>
-                                </div>
-                              </div>
-                          <% end %>
-                        </fieldset>
-                        <fieldset class="form-group">
-                          <legend>Dimensions to plot</legend>
-                          <% filter_fields.each do |field| %>
-                              <div class="form-group">
-                                <%= label_tag "group_#{field['name']}", field['name'], :class => 'col-sm-2 control-label' %>
-                                <div class="col-sm-10">
-                                  <%= select_tag "group_#{field['name']}", options_for_select(field['distinctValues']), :multiple => true, :class => 'form-control' %>
-                                </div>
-                              </div>
-                          <% end %>
-                        </fieldset>
+                </select>
+              <% end %>
+
+            </div>
+            
+
+            <div class="calendar-container">
+              <% if params[:name] %>
+                <div class="form-container d-flex">
+                  <%= form_tag kanaui_engine.dashboard_index_path, :class => 'form-vertical d-flex', :method => :get do %>
+                    <div class="trigger-invoice-box form-group">
+                      <input name="name" type="hidden" value="<%= @raw_name %>">
+                      <input name="smooth" type="hidden" value="<%= params[:smooth] %>">
+                      <input name="sql_only" type="hidden" value="<%= params[:sql_only] %>">
+                      <input name="format" type="hidden" value="<%= params[:format] %>">
+                      <input name="delta_days" type="hidden" value="<%= (@end_date.to_date - @start_date.to_date).to_i %>">
+                      <div class="d-flex align-items-center">
+                        <div class="d-flex gap-2">
+                          <div class="form-group d-flex align-items-center gap-2"  id="dp1">
+                            <b>From:</b>
+                            <div class="custom-date-input-wrapper kaui-button custom-hover">
+                              <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M14.9167 12.5V18.3333M17.8333 15.4167H12" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M14.0833 1.66675V5.00008M6.58325 1.66675V5.00008" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M17.8333 10.8333V4.99992C17.8333 4.07944 17.0871 3.33325 16.1666 3.33325H4.49992C3.57944 3.33325 2.83325 4.07944 2.83325 4.99992V16.6666C2.83325 17.5871 3.57944 18.3333 4.49992 18.3333H10.3333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M2.83325 8.33325H17.8333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                              </svg>
+
+                              <input class="form-control datepicker" name="start_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true" value="<%= @start_date %>">
+                            </div>
+                          </div>
+                          <div class="form-group d-flex align-items-center gap-2">
+                            <b>To:</b>
+                            <div class="custom-date-input-wrapper kaui-button custom-hover">
+                              <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M14.9167 12.5V18.3333M17.8333 15.4167H12" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M14.0833 1.66675V5.00008M6.58325 1.66675V5.00008" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M17.8333 10.8333V4.99992C17.8333 4.07944 17.0871 3.33325 16.1666 3.33325H4.49992C3.57944 3.33325 2.83325 4.07944 2.83325 4.99992V16.6666C2.83325 17.5871 3.57944 18.3333 4.49992 18.3333H10.3333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M2.83325 8.33325H17.8333" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                              </svg>
 
-                        <div class="form-group">
-                          <div class="col-sm-offset-2 col-sm-10">
-                            <%= submit_tag 'Refresh', :class => 'btn btn-default' %>
+                              <input class="form-control datepicker" name="end_date" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true" value="<%= @end_date %>">
+                            </div>
                           </div>
+                          <% ((@report['variables'] || {})['fields'] || []).each do |definition| %>
+                            <div class="form-group">
+                              <div class="col-md-7">
+                                <%= definition['name'].titleize %>:
+                                <% # TODO Not fully implemented server side %>
+                                <% if definition['dataType'] == 'date' %>
+                                  <% # TODO datepicker breaks :hover %>
+                                  <input class="form-control" name="variable_<%= definition['name'] %>" type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-highlight="true" value=""/>
+                                <% else %>
+                                  <input class="form-control" name="variable_<%= definition['name'] %>" type="text" value=""/>
+                                <% end %>
+                              </div>
+                            </div>
+                          <% end %>
                         </div>
-                    <% end %>
-                  </li>
-                    <li>Current Analytics query:&nbsp;<%= link_to '<i class="fa fa-question-circle"></i>'.html_safe, 'http://docs.killbill.io/latest/userguide_analytics.html#_dashboard_api', :target => '_blank' %>
-                    <pre><%= params[:name] -%></pre>
-                  </li>
+                        
+
+                        <%= render "kaui/components/button/button", {
+                          label: "Refresh",
+                          icon: "kaui/setting/reset.svg",
+                          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                          type: "submit",
+                          html_class: "btn btn-xs kaui-dropdown custom-hover py-2 px-3 refresh-button",
+                        } %>
+                      
+                          <%= link_to kanaui_engine.url_for(:controller => :reports), class: 'text-decoration-none' do %>
+                            <%= render "kaui/components/button/button", {
+                              label: "Configure reports",
+                              variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                              type: "button",
+                              html_class: "btn btn-xs kaui-dropdown custom-hover py-2 px-3 refresh-button",
+                            } %>
+                          <% end %>
+                      </div>
+                    </div>
+                  <% end %>
+                </div>
               <% end %>
-                <li><%= link_to 'SQL query', kanaui_engine.reports_path(params.to_h.merge(:sql_only => true)) %></li>
-              </ul>
+            </div>
+          </span>
+        </div>
+
+        <div class="analytics w-100">
+          <div class="flex-panel kaui-container w-100">
+
+            <div class="w-100">
+              <div class="row">
+                <div class="">
+                  <% if params[:name] %>
+                    
+                    <div id="date-controls" style="display: none;">
+                      <div class="custom-tabs my-4">
+                        <% @available_start_dates.each do |key, value| %>
+                          <%= link_to key, kanaui_engine.dashboard_index_path(params.to_h.merge(:start_date => value)), class: "custom-tab #{'activelink' if params[:start_date] == value}" %>
+                        <% end %>
+                      </div>
+                    </div>
+                    <div id="loading-spinner"></div>
+                    <div class="d-flex w-100 align-items-center">
+                      <div class="chart-title-container">
+                        <h2 class="chart-title" id="chart-title">
+                          <%= @raw_name.titleize %>
+                        </h2>
+                      </div>
+                      <div id="chartAnchor" data-reports-path="<%= kanaui_engine.reports_path(params.to_h) %>" class="w-100 h-100"></div>
+                    </div>
+                    
+                    <hr>
+
+                    <div class="pull-right d-flex align-items-center gap-3 justify-content-end">
+                      <%= link_to kanaui_engine.url_for(controller: :settings), class: 'text-decoration-none' do %>
+                        <%= render "kaui/components/button/button", {
+                          label: "Settings",
+                          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                          type: "button",
+                          html_class: "btn btn-xs kaui-dropdown custom-hover py-2 px-3 refresh-button"
+                        } %>
+                      <% end %>
+                      <% if @report['reportType'] == 'TABLE' %>
+                        <input type="hidden" id="visible-table-columns" value="<%= @visible_columns %>">
+                        <a class="btn btn-default p-0 py-2" id="copy-url" data-reports-path="<%= kanaui_engine.dashboard_index_path(params.to_h) %>">Copy URL</a>
+                        <input id="url-placeholder" class="form-control hidden url-placeholder-input">
+                      <% end %>
+                      <%= link_to kanaui_engine.reports_path(params.to_h.merge(:format => 'csv')), class: 'text-decoration-none' do %>
+                        <%= render "kaui/components/button/button", {
+                          label: "Download raw data",
+                          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                          type: "button",
+                          html_class: "btn btn-xs kaui-dropdown custom-hover py-2 px-3 refresh-button"
+                        } %>
+                      <% end %>
+                    </div>
+                    <a class="" role="button" data-bs-toggle="collapse" href="#advanced-controls" aria-expanded="false" aria-controls="advanced-controls">
+                      <%= render "kaui/components/button/button", {
+                        label: "Advanced controls",
+                        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                        type: "button",
+                        html_class: "btn btn-xs kaui-dropdown custom-hover py-2 px-3 refresh-button"
+                      } %>
+                    </a>
+                    <div class="collapse" id="advanced-controls">
+                      <div class="well">
+                        <ul class="">
+                          <% if @report['reportType'] == 'TIMELINE' %>
+                            <% at_least_two_months = params[:start_date].blank? || params[:end_date].blank? || (params[:end_date].to_date.beginning_of_month - 1.month > params[:start_date].to_date) %>
+                            <% at_least_two_weeks = params[:start_date].blank? || params[:end_date].blank? || (params[:end_date].to_date.beginning_of_week - 1.week > params[:start_date].to_date) %>
+                            <% if params[:smooth] != 'AVERAGE_WEEKLY' && at_least_two_weeks %>
+                              <li><%= link_to 'Weekly average', kanaui_engine.dashboard_index_path(params.to_h.merge(:smooth => 'AVERAGE_WEEKLY')) %></li>
+                            <% end %>
+                            <% if params[:smooth] != 'AVERAGE_MONTHLY' && at_least_two_months %>
+                              <li><%= link_to 'Monthly average', kanaui_engine.dashboard_index_path(params.to_h.merge(:smooth => 'AVERAGE_MONTHLY')) %></li>
+                            <% end %>
+                            <% if params[:smooth] != 'SUM_WEEKLY' && at_least_two_weeks %>
+                              <li><%= link_to 'Weekly sum', kanaui_engine.dashboard_index_path(params.to_h.merge(:smooth => 'SUM_WEEKLY')) %></li>
+                            <% end %>
+                            <% if params[:smooth] != 'SUM_MONTHLY' && at_least_two_months %>
+                              <li><%= link_to 'Monthly sum', kanaui_engine.dashboard_index_path(params.to_h.merge(:smooth => 'SUM_MONTHLY')) %></li>
+                            <% end %>
+                          <% end %>
+                          <% filter_fields = ((@report['schema'] || {})['fields'] || []).select { |field| !field['distinctValues'].blank? && field['dataType'] =~ /char/ } # To ignore tenant_record_id %>
+                          <% unless filter_fields.empty? %>
+                            <li class="advanced-controls">
+                              <span>Slicing & Dicing:</span>
+                              <%= form_tag kanaui_engine.dashboard_index_path(params.to_h), :method => :get, :class => 'form-horizontal' do %>
+                                  <input name="start_date" type="hidden" value="<%= @start_date %>">
+                                  <input name="end_date" type="hidden" value="<%= @end_date %>">
+                                  <input name="name" type="hidden" value="<%= @raw_name %>">
+                                  <input name="smooth" type="hidden" value="<%= params[:smooth] %>">
+                                  <input name="sql_only" type="hidden" value="<%= params[:sql_only] %>">
+                                  <input name="format" type="hidden" value="<%= params[:format] %>">
+
+                                  <fieldset>
+                                    <legend>Filters</legend>
+                                    <% filter_fields.each do |field| %>
+                                        <div class="form-group">
+                                          <%= label_tag "filter_#{field['name']}", field['name'], :class => 'control-label' %>
+                                          <div class="w-100">
+                                            <%= select_tag "filter_#{field['name']}", options_for_select(field['distinctValues']), :multiple => true, :class => 'form-control' %>
+                                          </div>
+                                        </div>
+                                    <% end %>
+                                  </fieldset>
+                                  <fieldset>
+                                    <legend>Dimensions to plot</legend>
+                                    <% filter_fields.each do |field| %>
+                                        <div class="form-group">
+                                          <%= label_tag "group_#{field['name']}", field['name'], :class => 'control-label' %>
+                                          <div class="w-100">
+                                            <%= select_tag "group_#{field['name']}", options_for_select(field['distinctValues']), :multiple => true, :class => 'form-control' %>
+                                          </div>
+                                        </div>
+                                    <% end %>
+                                  </fieldset>
+
+                                  <div class="form-group mb-0">
+                                      <%= submit_tag 'Refresh', :class => 'btn btn-default' %>
+                                  </div>
+                              <% end %>
+                            </li>
+                            <li>
+                              <div class="query-label">
+                                Current Analytics query:&nbsp;<%= link_to '<i class="fa fa-question-circle"></i>'.html_safe, 'http://docs.killbill.io/latest/userguide_analytics.html#_dashboard_api', :target => '_blank' %>
+                              </div>
+                              <pre><%= params[:name] -%></pre>
+                            </li>
+                        <% end %>
+                          <li><%= link_to 'SQL query', kanaui_engine.reports_path(params.to_h.merge(:sql_only => true)) %></li>
+                        </ul>
+                      </div>
+                    </div>
+                  <% end %>
+                </div>
+              </div>
             </div>
           </div>
-        <% end %>
+
+        </div>
       </div>
     </div>
   </div>
 </div>
 
-
 <%= javascript_tag do %>
-  $(document).ready(function() {
-    $('.calendar-icon').click(function() {
-      $('.form-container').toggle();
-    });
-  });
-<% end %>
-
-<style type="text/css">
-  .form-container {
-    display: none;
+  function goToReport(url) {
+    if (!url) {
+      return;
+    }
+
+    // Remove leading/trailing whitespace
+    url = url.trim();
+
+    // Only allow relative URLs (starting with '/')
+    // Reject absolute URLs (starting with http://, https://, //, etc.)
+    // Reject dangerous schemes (javascript:, data:, vbscript:, etc.)
+    if (!url.match(/^\/[^\/]/) && url !== '/') {
+      console.error('Invalid URL: only relative paths starting with "/" are allowed');
+      return;
+    }
+
+    // Additional check: reject any URL containing dangerous schemes
+    var lowerUrl = url.toLowerCase();
+    if (lowerUrl.indexOf('javascript:') !== -1 || 
+        lowerUrl.indexOf('data:') !== -1 ||
+        lowerUrl.indexOf('vbscript:') !== -1 ||
+        lowerUrl.indexOf('file:') !== -1) {
+      console.error('Invalid URL: dangerous scheme detected');
+      return;
+    }
+
+    // Reject URLs starting with // (protocol-relative URLs)
+    if (url.indexOf('//') === 0) {
+      console.error('Invalid URL: protocol-relative URLs are not allowed');
+      return;
+    }
+
+    // Safe to navigate
+    window.location.href = url;
   }
-</style>
+<% end %>
\ No newline at end of file
diff --git a/app/views/kanaui/reports/_form.html.erb b/app/views/kanaui/reports/_form.html.erb
index afe379d..ccfaf55 100644
--- a/app/views/kanaui/reports/_form.html.erb
+++ b/app/views/kanaui/reports/_form.html.erb
@@ -1,63 +1,76 @@
 <%= form_tag @report[:reportName].blank? ? url_for(:controller => :reports, :action => :create) : report_path(@report[:reportName]), :method => (@report[:reportName].blank? ? :post : :put), :class => 'form-horizontal' do %>
-    <div class="form-group">
-      <%= label_tag :report_name, 'Report name', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= text_field_tag :report_name, @report[:reportName], :class => 'form-control', :disabled => !@report[:reportName].blank?, :read_only => !@report[:reportName].blank? %>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :report_pretty_name, 'Pretty name', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= text_field_tag :report_pretty_name, @report[:reportPrettyName], :class => 'form-control' %>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :report_type, 'Type', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= select_tag :report_type, options_for_select(%w(TIMELINE COUNTERS TABLE), @report[:reportType] || 'TABLE'), :class => 'form-control' %>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :source_table_name, 'Source', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= text_field_tag :source_table_name, @report[:sourceTableName], :class => 'form-control' %>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :source_name, 'Source name', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= text_field_tag :source_name, @report[:sourceName], :class => 'form-control' %>
-        <span>Must match a database configuration entry in the Analytics plugin</span>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :source_query, 'SQL query', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= text_area_tag :source_query, @report[:sourceQuery], rows: 10, cols: 25, :class => 'form-control' %>
-        <span>Don't add a trailing ;</span>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :refresh_procedure_name, 'Refresh procedure', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= text_field_tag :refresh_procedure_name, @report[:refreshProcedureName], :class => 'form-control' %>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :refresh_frequency, 'Refresh frequency', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= select_tag :refresh_frequency, options_for_select(%w(HOURLY DAILY), @report[:refreshFrequency]), :class => 'form-control', :include_blank => true %>
-      </div>
-    </div>
-    <div class="form-group">
-      <%= label_tag :refresh_hour_of_day_gmt, 'Refresh hour (GMT)', :class => 'col-sm-3 control-label' %>
-      <div class="col-sm-9">
-        <%= number_field_tag :refresh_hour_of_day_gmt, @report[:refreshHourOfDayGmt], {:min => 1, :max => 23, :class => 'form-control'} %>
-      </div>
-    </div>
-    <div class="form-group">
-      <div class="col-sm-offset-3 col-sm-9">
-        <%= submit_tag 'Save', :class => 'btn btn-default' %>
-      </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :report_name, 'Report name', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= text_field_tag :report_name, @report[:reportName], :class => 'form-control', :disabled => !@report[:reportName].blank?, :read_only => !@report[:reportName].blank? %>
     </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :report_pretty_name, 'Pretty name', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= text_field_tag :report_pretty_name, @report[:reportPrettyName], :class => 'form-control' %>
+    </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :report_type, 'Type', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= select_tag :report_type, options_for_select(%w(TIMELINE COUNTERS TABLE), @report[:reportType] || 'TABLE'), :class => 'form-control' %>
+    </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :source_table_name, 'Source', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= text_field_tag :source_table_name, @report[:sourceTableName], :class => 'form-control' %>
+    </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :source_name, 'Source name', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= text_field_tag :source_name, @report[:sourceName], :class => 'form-control' %>
+      <span>Must match a database configuration entry in the Analytics plugin</span>
+    </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :source_query, 'SQL query', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= text_area_tag :source_query, @report[:sourceQuery], rows: 10, cols: 25, :class => 'form-control' %>
+      <span>Don't add a trailing ;</span>
+    </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :refresh_procedure_name, 'Refresh procedure', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= text_field_tag :refresh_procedure_name, @report[:refreshProcedureName], :class => 'form-control' %>
+    </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :refresh_frequency, 'Refresh frequency', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= select_tag :refresh_frequency, options_for_select(%w(HOURLY DAILY), @report[:refreshFrequency]), :class => 'form-control', :include_blank => true %>
+    </div>
+  </div>
+  <div class="form-group d-flex pb-3">
+    <%= label_tag :refresh_hour_of_day_gmt, 'Refresh hour (GMT)', :class => 'col-sm-3 control-label' %>
+    <div class="col-sm-9">
+      <%= number_field_tag :refresh_hour_of_day_gmt, @report[:refreshHourOfDayGmt], {:min => 1, :max => 23, :class => 'form-control'} %>
+    </div>
+  </div>
+
+  <div class="form-group d-flex justify-content-end border-top pt-3 pb-3">
+    <%= render "kaui/components/button/button", {
+      label: 'Close',
+      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+      type: "button",
+      html_class: "kaui-button custom-hover mx-2",
+      html_options: {
+        onclick: "window.history.back();"
+      }
+    } %>
+    <%= render "kaui/components/button/button", {
+      label: 'Save',
+      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+      type: "submit",
+      html_class: "kaui-dropdown custom-hover"
+    } %>
+  </div>
 <% end %>
diff --git a/app/views/kanaui/reports/_reports_table.html.erb b/app/views/kanaui/reports/_reports_table.html.erb
index 04729a3..ce29499 100644
--- a/app/views/kanaui/reports/_reports_table.html.erb
+++ b/app/views/kanaui/reports/_reports_table.html.erb
@@ -1,4 +1,4 @@
-<table id="reports-table" class="table table-condensed table-striped mobile-data">
+<table id="reports-table">
   <thead>
   <tr>
     <th>Name</th>
@@ -15,7 +15,7 @@
   </tr>
   </thead>
   <tbody>
-  <% reports.each do |report| %>
+    <% reports.each do |report| %>
       <tr>
         <td><%= report[:reportName] %></td>
         <td><%= report[:reportPrettyName] %></td>
@@ -24,18 +24,45 @@
         <td><%= report[:sourceName] %></td>
         <td>
           <% unless report[:sourceQuery].blank? %>
-            <a href="" data-toggle="modal" data-target="#<%= report[:reportName] %>-query-modal">
+            <a href="" data-bs-toggle="modal" data-bs-target="#<%= report[:reportName] %>-query-modal">
               Show SQL
             </a>
+
             <div class="modal fade" id="<%= report[:reportName] %>-query-modal" tabindex="-1" role="dialog">
               <div class="modal-dialog" role="document">
-                <div class="modal-content column-block">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title d-flex align-items-center gap-3" id="advanceSearchModalLabel">
+                      <span class="icon-container">
+                        <%= image_tag("kaui/modal/search.svg", width: 20, height: 20) %>
+                      </span>
+                      Source Query
+                    </h5>
+                    <button type="button" class="close close-button custom-hover" data-bs-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">
+                        <%= image_tag("kaui/modal/close.svg", width: 20, height: 20) %>
+                      </span>
+                    </button>
+                  </div>
                   <div class="modal-body">
                     <p><pre class="sql-query"><code><%= report[:sourceQuery] %></code></pre></p>
                   </div>
-                </div><!-- /.modal-content -->
-              </div><!-- /.modal-dialog -->
-            </div><!-- /.modal -->
+                  <div class="modal-footer">
+                    <%= render "kaui/components/button/button", {
+                      label: 'Close',
+                      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                      type: "button",
+                      html_class: "kaui-button custom-hover",
+                      html_options: {
+                        data: {
+                          bs_dismiss: "modal"
+                        },
+                      }
+                    } %>
+                  </div>
+                </div>
+              </div>
+            </div>
           <% end %>
         </td>
         <td><%= report[:refreshProcedureName] %></td>
@@ -49,12 +76,12 @@
           </ul>
         </td>
         <td>
-          <%= link_to '<i class="fa fa-refresh"></i>'.html_safe, refresh_report_path(report[:reportName]), :method => :put %>
-          <%= link_to '<i class="fa fa-pencil"></i>'.html_safe, edit_report_path(report[:reportName]) %>
-          <%= link_to '&nbsp;<i class="fa fa-times"></i>'.html_safe, report_path(report[:reportName]), :method => :delete %>
+          <%= link_to 'Delete', report_path(report[:reportName]), :method => :delete, :class => 'delete-button table-button' %>
+          <%= link_to 'Refresh', refresh_report_path(report[:reportName]), :method => :put, :class => 'refresh-button table-button' %>
+          <%= link_to 'Edit', edit_report_path(report[:reportName]), :class => 'edit-button table-button' %>
         </td>
       </tr>
-  <% end %>
+    <% end %>
   </tbody>
 </table>
 
diff --git a/app/views/kanaui/reports/edit.html.erb b/app/views/kanaui/reports/edit.html.erb
index 425568d..349081a 100644
--- a/app/views/kanaui/reports/edit.html.erb
+++ b/app/views/kanaui/reports/edit.html.erb
@@ -1,10 +1,17 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
 
-    <div class="column-block">
-      <h1>Update report</h1>
-      <%= render 'form' %>
+<div class="register kanaui-reports-edit">
+    <div class="">
+        <div class="mx-auto" style="max-width: 37.5rem;">
+            <h5 class="new-report-title pb-3 mb-3 border-bottom">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M12.9166 10.0007C12.9166 11.6115 11.6108 12.9173 9.99998 12.9173C8.38915 12.9173 7.08331 11.6115 7.08331 10.0007C7.08331 8.38982 8.38915 7.08398 9.99998 7.08398C11.6108 7.08398 12.9166 8.38982 12.9166 10.0007Z" stroke="#414651" stroke-width="1.5"/>
+                      <path d="M8.14341 2.23582L7.50001 4.16602L6.20014 4.98815L4.07331 4.4619C3.71675 4.37368 3.34448 4.52931 3.15681 4.84505L2.01998 6.75762C1.81512 7.10229 1.88473 7.54398 2.18568 7.80891L3.67746 9.12218V10.8765L2.18615 12.1898C1.88527 12.4547 1.81569 12.8963 2.02053 13.2409L3.15741 15.1536C3.34508 15.4694 3.71736 15.625 4.07391 15.5368L6.20075 15.0105L7.43216 15.7011L8.01996 17.7311C8.12313 18.0874 8.44943 18.3327 8.82043 18.3327H11.1803C11.5512 18.3327 11.8775 18.0874 11.9807 17.7311L12.5685 15.7011L13.7993 15.0105L15.9261 15.5368C16.2827 15.625 16.6549 15.4694 16.8426 15.1536L18.0009 13.2048C18.196 12.8767 18.1431 12.4578 17.8726 12.1885L16.3674 10.6899L16.368 9.30877L17.8732 7.81017C18.1438 7.5408 18.1967 7.12202 18.0016 6.79384L16.8432 4.84505C16.6555 4.52931 16.2833 4.37368 15.9267 4.4619L13.7998 4.98815L12.5 4.16602L11.8566 2.23582C11.7432 1.89554 11.4248 1.66602 11.066 1.66602H8.93401C8.57526 1.66602 8.25683 1.89554 8.14341 2.23582Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Update report
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/kanaui/reports/index.html.erb b/app/views/kanaui/reports/index.html.erb
index f726618..02a970e 100644
--- a/app/views/kanaui/reports/index.html.erb
+++ b/app/views/kanaui/reports/index.html.erb
@@ -1,17 +1,33 @@
-<div class="search">
-
-  <div class="column-block">
-
-    <h1>Configured reports
-      <%= link_to '&nbsp;<i class="fa fa-plus-square"></i>'.html_safe, new_report_path %>
-    </h1>
-
-    <%= render :partial => 'kanaui/reports/reports_table', :locals => {:reports => @reports} %>
-
+<div class="kaui-container kanaui-reports-index">
+  <div class="d-flex " style="gap: 4rem;">
+    <div class="configured-reports">
+      <div class="d-flex flex-column ">
+        <div class="configured-reports-header mb-4">
+          <div class="d-flex align-items-center">
+          <h2>Configured reports</h2>
+          </div>
+          <span>
+            <%= link_to dashboard_index_path, class: 'text-decoration-none' do %>
+              <%= render "kaui/components/button/button", {
+                label: "Dashboard",
+                variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                type: "button",
+                html_class: "btn btn-xs kaui-button custom-hover py-2 px-3"
+              } %>
+            <% end %>
+            <%= link_to new_report_path, class: 'text-decoration-none' do %>
+              <%= render "kaui/components/button/button", {
+                label: "New Report",
+                icon: "kaui/plus.svg",
+                variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                type: "button",
+                html_class: "btn btn-xs kaui-dropdown custom-hover py-2 px-3"
+              } %>
+            <% end %>
+          </span>
+        </div>
+        <%= render :partial => 'kanaui/reports/reports_table', :locals => {:reports => @reports} %>
+      </div>
+    </div>
   </div>
-
-  <hr/>
-
-  <h1><%= link_to 'Dashboard', dashboard_index_path %></h1>
-
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/kanaui/reports/new.html.erb b/app/views/kanaui/reports/new.html.erb
index 0e1e844..5fb24e8 100644
--- a/app/views/kanaui/reports/new.html.erb
+++ b/app/views/kanaui/reports/new.html.erb
@@ -1,10 +1,16 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new report</h1>
-      <%= render 'form' %>
+<div class="register kanaui-reports-new">
+    <div class="">
+        <div class="mx-auto" style="max-width: 37.5rem;">
+            <h5 class="new-report-title pb-3 mb-3 border-bottom">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M12.9166 10.0007C12.9166 11.6115 11.6108 12.9173 9.99998 12.9173C8.38915 12.9173 7.08331 11.6115 7.08331 10.0007C7.08331 8.38982 8.38915 7.08398 9.99998 7.08398C11.6108 7.08398 12.9166 8.38982 12.9166 10.0007Z" stroke="#414651" stroke-width="1.5"/>
+                      <path d="M8.14341 2.23582L7.50001 4.16602L6.20014 4.98815L4.07331 4.4619C3.71675 4.37368 3.34448 4.52931 3.15681 4.84505L2.01998 6.75762C1.81512 7.10229 1.88473 7.54398 2.18568 7.80891L3.67746 9.12218V10.8765L2.18615 12.1898C1.88527 12.4547 1.81569 12.8963 2.02053 13.2409L3.15741 15.1536C3.34508 15.4694 3.71736 15.625 4.07391 15.5368L6.20075 15.0105L7.43216 15.7011L8.01996 17.7311C8.12313 18.0874 8.44943 18.3327 8.82043 18.3327H11.1803C11.5512 18.3327 11.8775 18.0874 11.9807 17.7311L12.5685 15.7011L13.7993 15.0105L15.9261 15.5368C16.2827 15.625 16.6549 15.4694 16.8426 15.1536L18.0009 13.2048C18.196 12.8767 18.1431 12.4578 17.8726 12.1885L16.3674 10.6899L16.368 9.30877L17.8732 7.81017C18.1438 7.5408 18.1967 7.12202 18.0016 6.79384L16.8432 4.84505C16.6555 4.52931 16.2833 4.37368 15.9267 4.4619L13.7998 4.98815L12.5 4.16602L11.8566 2.23582C11.7432 1.89554 11.4248 1.66602 11.066 1.66602H8.93401C8.57526 1.66602 8.25683 1.89554 8.14341 2.23582Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Add new report
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/kanaui/settings/index.html.erb b/app/views/kanaui/settings/index.html.erb
index 93a9574..1523427 100644
--- a/app/views/kanaui/settings/index.html.erb
+++ b/app/views/kanaui/settings/index.html.erb
@@ -1,19 +1,40 @@
-<div class="column-block">
-  <h1>Analytics settings</h1>
-
-  <div>
-    <%= form_tag kanaui_engine.settings_path, :method => :post, :class => 'form-horizontal' do %>
-      <div class='form-group'>
-        <%= label_tag :account_id, 'Account id', :class => 'col-sm-2 control-label' %>
-        <div class="col-sm-4">
-          <%= text_field_tag :account_id, nil, :class => 'form-control' %>
+<div class="register kanaui-settings-index">
+    <div class="">
+        <div class="mx-auto" style="max-width: 37.5rem;">
+            <h5 class="analytics-settings-title pb-3 mb-3 border-bottom">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M12.9166 10.0007C12.9166 11.6115 11.6108 12.9173 9.99998 12.9173C8.38915 12.9173 7.08331 11.6115 7.08331 10.0007C7.08331 8.38982 8.38915 7.08398 9.99998 7.08398C11.6108 7.08398 12.9166 8.38982 12.9166 10.0007Z" stroke="#414651" stroke-width="1.5"/>
+                      <path d="M8.14341 2.23582L7.50001 4.16602L6.20014 4.98815L4.07331 4.4619C3.71675 4.37368 3.34448 4.52931 3.15681 4.84505L2.01998 6.75762C1.81512 7.10229 1.88473 7.54398 2.18568 7.80891L3.67746 9.12218V10.8765L2.18615 12.1898C1.88527 12.4547 1.81569 12.8963 2.02053 13.2409L3.15741 15.1536C3.34508 15.4694 3.71736 15.625 4.07391 15.5368L6.20075 15.0105L7.43216 15.7011L8.01996 17.7311C8.12313 18.0874 8.44943 18.3327 8.82043 18.3327H11.1803C11.5512 18.3327 11.8775 18.0874 11.9807 17.7311L12.5685 15.7011L13.7993 15.0105L15.9261 15.5368C16.2827 15.625 16.6549 15.4694 16.8426 15.1536L18.0009 13.2048C18.196 12.8767 18.1431 12.4578 17.8726 12.1885L16.3674 10.6899L16.368 9.30877L17.8732 7.81017C18.1438 7.5408 18.1967 7.12202 18.0016 6.79384L16.8432 4.84505C16.6555 4.52931 16.2833 4.37368 15.9267 4.4619L13.7998 4.98815L12.5 4.16602L11.8566 2.23582C11.7432 1.89554 11.4248 1.66602 11.066 1.66602H8.93401C8.57526 1.66602 8.25683 1.89554 8.14341 2.23582Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Analytics settings
+            </h5>
+            <%= form_tag kanaui_engine.settings_path, :method => :post, :class => 'form-horizontal' do %>
+              <div class='form-group d-flex pb-3 border-bottom mb-3'>
+                <%= label_tag :account_id, 'Account id', :class => 'col-sm-3 control-label' %>
+                <div class="col-sm-9">
+                  <%= text_field_tag :account_id, nil, :class => 'form-control' %>
+                </div>
+              </div>
+              <div class="form-group d-flex justify-content-end">
+                <%= render "kaui/components/button/button", {
+                  label: 'Close',
+                  variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                  type: "button",
+                  html_class: "kaui-button custom-hover mx-2",
+                  html_options: {
+                    onclick: "window.history.back();"
+                  }
+                } %>
+                <%= render "kaui/components/button/button", {
+                  label: 'Refresh',
+                  variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                  type: "submit",
+                  html_class: "kaui-dropdown custom-hover"
+                } %>
+              </div>
+            <% end %>
         </div>
-      </div>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
-          <%= submit_tag 'Refresh', :class => 'btn btn-default' %>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>
+    </div>
+</div>
\ No newline at end of file