diff --git a/app/assets/stylesheets/kanaui/kanaui.css b/app/assets/stylesheets/kanaui/kanaui.css
index 65a6b2c..a125e24 100644
--- a/app/assets/stylesheets/kanaui/kanaui.css
+++ b/app/assets/stylesheets/kanaui/kanaui.css
@@ -10,14 +10,14 @@
   align-items: start;
   justify-content: space-between;
   padding: 0;
-  border-bottom: 0.0625rem solid #e9eaeb;
+  border-bottom: 0.0625rem solid var(--kb-outline-primary);
 }
 
 .kenui-analytics-dashboard-index .analytics-header h2 {
   font-weight: 600;
   font-size: 1.125rem;
   line-height: 2.5rem;
-  color: #414651;
+  color: var(--kb-on-surface-secondary);
   margin-bottom: 1.25rem;
 }
 
@@ -39,7 +39,7 @@
 
 .kenui-analytics-dashboard-index .custom-date-input-wrapper {
   padding: 0 0.625rem !important;
-  border: 0.0625rem solid #d5d7da !important;
+  border: 0.0625rem solid var(--kb-outline-secondary) !important;
   border-radius: 0.375rem;
   cursor: pointer;
   max-width: 8.5rem;
@@ -56,12 +56,12 @@
   box-shadow: none;
   padding: 0 !important;
   font-size: 1rem;
-  color: #6b7280;
+  color: var(--kb-on-surface-tertiary);
   height: 2.5rem;
 }
 
 .kenui-analytics-dashboard-index .custom-date-input-wrapper input::placeholder {
-  color: #717680;
+  color: var(--kb-on-surface-quaternary);
 }
 
 .kenui-analytics-dashboard-index .custom-date-input-wrapper input.form-control {
@@ -81,10 +81,10 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
-  background-color: #fff;
+  color: var(--kb-neutral-800);
+  background-color: var(--kb-neutral-0);
   background-clip: padding-box;
-  border: 0.0625rem solid #ced4da;
+  border: 0.0625rem solid var(--kb-outline-secondary);
   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>");
@@ -98,13 +98,13 @@
 .kenui-analytics-dashboard-index select.form-select:focus {
   box-shadow: none;
   outline: none;
-  border-color: #1570ef;
+  border-color: var(--kb-primary);
 }
 
 .kenui-analytics-dashboard-index .well ul {
   list-style-type: none;
   margin: 0.625rem 0 0;
-  background: #fafafa;
+  background: var(--kb-surface-container-low);
   width: 100%;
   padding: 1rem 1.25rem;
   border-radius: 0.5rem;
@@ -122,12 +122,12 @@
 .kenui-analytics-dashboard-index .well > ul > li.smoothing-option > a {
   display: inline-flex;
   align-items: center;
-  background: #ffffff;
-  border: 0.0625rem solid #d5d7da;
+  background: var(--kb-neutral-0);
+  border: 0.0625rem solid var(--kb-outline-secondary);
   border-radius: 999px;
   padding: 0.375rem 0.75rem;
   text-decoration: none;
-  color: #414651;
+  color: var(--kb-on-surface-secondary);
   font-weight: 500;
   font-size: 0.8125rem;
   line-height: 1.25rem;
@@ -135,12 +135,12 @@
 }
 
 .kenui-analytics-dashboard-index .well > ul > li.smoothing-option > a:hover {
-  border-color: #1570ef;
-  color: #1570ef;
+  border-color: var(--kb-primary);
+  color: var(--kb-primary);
 }
 
 .kenui-analytics-dashboard-index .well ul li a {
-  color: #717680;
+  color: var(--kb-on-surface-quaternary);
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -156,12 +156,12 @@
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: #414651;
+  color: var(--kb-on-surface-secondary);
 }
 
 .kenui-analytics-dashboard-index .custom-tabs {
-  background-color: #fafafa;
-  border: 0.0625rem solid #e9eaeb;
+  background-color: var(--kb-surface-container-low);
+  border: 0.0625rem solid var(--kb-outline-primary);
   border-radius: 0.375rem;
   display: flex;
   align-items: center;
@@ -177,7 +177,7 @@
   border: none;
   font-weight: 500;
   font-size: 0.875rem;
-  color: #717680;
+  color: var(--kb-on-surface-quaternary);
   padding: 0.375rem 0.75rem;
   border-radius: 0.25rem;
   cursor: pointer;
@@ -188,13 +188,13 @@
 }
 
 .kenui-analytics-dashboard-index .custom-tabs .activelink {
-  color: #414651 !important;
-  background-color: #ffffff !important;
+  color: var(--kb-on-surface-secondary) !important;
+  background-color: var(--kb-neutral-0) !important;
   box-shadow: 0 0.0625rem 0.188rem rgba(10, 13, 18, 0.1);
 }
 
 .kenui-analytics-dashboard-index #chartAnchor {
-  background: #ffffff;
+  background: var(--kb-neutral-0);
 }
 
 .kenui-analytics-dashboard-index .chart-title-container {
@@ -211,14 +211,14 @@
   font-weight: 600;
   font-size: 1.25rem;
   line-height: 1.75rem;
-  color: #111827;
+  color: var(--kb-neutral-800);
   white-space: normal;
   transform: none;
   text-align: left;
 }
 
 .kenui-analytics-dashboard-index #chartAnchor svg {
-  background: #ffffff;
+  background: var(--kb-neutral-0);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
@@ -230,7 +230,7 @@
 }
 
 .kenui-analytics-dashboard-index .grid:nth-of-type(2) line {
-  stroke: #f3f4f6;
+  stroke: var(--kb-surface-container);
   stroke-opacity: 0.6;
 }
 
@@ -241,7 +241,7 @@
 
 .kenui-analytics-dashboard-index .axis line,
 .kenui-analytics-dashboard-index .axis path {
-  stroke: #f5f5f5;
+  stroke: var(--kb-surface-container);
   stroke-width: 0.0625rem;
   shape-rendering: crispEdges;
 }
@@ -253,13 +253,13 @@
 
 .kenui-analytics-dashboard-index .y.axis line,
 .kenui-analytics-dashboard-index .y.axis path {
-  stroke: #f5f5f5;
+  stroke: var(--kb-surface-container);
   stroke-width: 0.0625rem;
 }
 
 .kenui-analytics-dashboard-index .axis text {
   font-size: 0.75rem;
-  fill: #6b7280;
+  fill: var(--kb-on-surface-tertiary);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
@@ -281,16 +281,16 @@
 }
 
 .kenui-analytics-dashboard-index .information {
-  fill: #ffffff;
-  stroke: #f5f5f5;
+  fill: var(--kb-neutral-0);
+  stroke: var(--kb-surface-container);
   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;
+  fill: var(--kb-surface-container-low);
+  stroke: var(--kb-surface-container);
   stroke-width: 0.0625rem;
   rx: 0.25rem 0.25rem 0 0;
 }
@@ -298,7 +298,7 @@
 .kenui-analytics-dashboard-index .info-title {
   font-size: 1rem;
   font-weight: 600;
-  fill: #374151;
+  fill: var(--kb-neutral-600);
 }
 
 /* app/views/kanaui/reports/edit.html.erb */
@@ -311,7 +311,7 @@
   font-size: 1.125rem;
   line-height: 1.75rem;
   letter-spacing: 0;
-  color: #1b1c1e;
+  color: var(--kb-on-surface-primary);
   padding: 1.5rem 0;
 }
 
@@ -319,7 +319,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: 0.0625rem solid #d5d7da;
+  border: 0.0625rem solid var(--kb-outline-secondary);
   border-radius: 0.375rem;
   width: 2.5rem;
   height: 2.5rem;
@@ -347,7 +347,7 @@
 }
 
 .kanaui-reports-edit select.form-control:focus {
-  border-color: #1570ef !important;
+  border-color: var(--kb-primary) !important;
   box-shadow: none;
   outline: none;
 }
@@ -356,7 +356,7 @@
   font-size: 0.875rem !important;
   font-weight: 500 !important;
   line-height: 1.25rem !important;
-  color: #414651 !important;
+  color: var(--kb-on-surface-secondary) !important;
 }
 
 .kanaui-reports-edit textarea.form-control {
@@ -364,7 +364,7 @@
 }
 
 .kanaui-reports-edit textarea.form-control:focus {
-  border-color: #1570ef !important;
+  border-color: var(--kb-primary) !important;
   outline: 0 !important;
   box-shadow: none !important;
 }
@@ -373,7 +373,7 @@
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: #535862;
+  color: var(--kb-on-surface-tertiary);
 }
 
 /* app/views/kanaui/reports/index.html.erb */
@@ -402,14 +402,14 @@
   align-items: start;
   justify-content: space-between;
   padding: 0;
-  border-bottom: 0.0625rem solid #e9eaeb;
+  border-bottom: 0.0625rem solid var(--kb-outline-primary);
 }
 
 .kanaui-reports-index .configured-reports .configured-reports-header h2 {
   font-weight: 600;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  color: #414651;
+  color: var(--kb-on-surface-secondary);
   margin-bottom: 1.25rem;
 }
 
@@ -419,7 +419,7 @@
   font-size: 0.875rem;
   line-height: 1.125rem;
   letter-spacing: 0;
-  color: #717680;
+  color: var(--kb-on-surface-quaternary);
   text-transform: capitalize;
 }
 
@@ -429,12 +429,12 @@
   padding: 1rem 0.5rem !important;
   line-height: 1.125rem !important;
   text-align: start;
-  color: #535862 !important;
+  color: var(--kb-on-surface-tertiary) !important;
   text-transform: capitalize !important;
 }
 
 .kanaui-reports-index td a {
-  color: #175cd3 !important;
+  color: var(--kb-primary) !important;
 }
 
 .kanaui-reports-index .table-button {
@@ -453,20 +453,20 @@
 }
 
 .kanaui-reports-index .delete-button {
-  color: #d92d20 !important;
+  color: var(--kb-error) !important;
 }
 
 .kanaui-reports-index .disabled-table-button {
-  color: #98a2b3 !important;
+  color: var(--kb-on-surface-quaternary) !important;
   cursor: not-allowed;
 }
 
 .kanaui-reports-index .edit-button {
-  color: #535862 !important;
+  color: var(--kb-on-surface-tertiary) !important;
 }
 
 .kanaui-reports-index .refresh-button {
-  color: #175cd3 !important;
+  color: var(--kb-primary) !important;
 }
 
 .kanaui-reports-index .modal-content {
@@ -491,7 +491,7 @@
   font-weight: 600;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  color: #181d27;
+  color: var(--kb-on-surface-primary);
 }
 
 .kanaui-reports-index .close-button {
@@ -509,7 +509,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: 0.0625rem solid #d5d7da;
+  border: 0.0625rem solid var(--kb-outline-secondary);
   border-radius: 0.375rem;
   width: 2.5rem;
   height: 2.5rem;
@@ -531,7 +531,7 @@
 
 .kanaui-reports-index pre {
   padding: 0.625rem;
-  background: #f4f4f4;
+  background: var(--kb-surface-container);
   border-radius: 0.5rem;
   overflow: auto;
   white-space: pre-wrap;
@@ -548,7 +548,7 @@
   font-size: 1.125rem;
   line-height: 1.75rem;
   letter-spacing: 0;
-  color: #1b1c1e;
+  color: var(--kb-on-surface-primary);
   padding: 1.5rem 0;
 }
 
@@ -556,7 +556,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: 0.0625rem solid #d5d7da;
+  border: 0.0625rem solid var(--kb-outline-secondary);
   border-radius: 0.375rem;
   width: 2.5rem;
   height: 2.5rem;
@@ -584,7 +584,7 @@
 }
 
 .kanaui-reports-new select.form-control:focus {
-  border-color: #1570ef !important;
+  border-color: var(--kb-primary) !important;
   box-shadow: none;
   outline: none;
 }
@@ -593,7 +593,7 @@
   font-size: 0.875rem !important;
   font-weight: 500 !important;
   line-height: 1.25rem !important;
-  color: #414651 !important;
+  color: var(--kb-on-surface-secondary) !important;
 }
 
 .kanaui-reports-new textarea.form-control {
@@ -601,7 +601,7 @@
 }
 
 .kanaui-reports-new textarea.form-control:focus {
-  border-color: #1570ef !important;
+  border-color: var(--kb-primary) !important;
   outline: 0 !important;
   box-shadow: none !important;
 }
@@ -610,7 +610,7 @@
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: #535862;
+  color: var(--kb-on-surface-tertiary);
 }
 
 /* app/views/kanaui/settings/index.html.erb */
@@ -623,7 +623,7 @@
   font-size: 1.125rem;
   line-height: 1.75rem;
   letter-spacing: 0;
-  color: #1b1c1e;
+  color: var(--kb-on-surface-primary);
   padding: 1.5rem 0;
 }
 
@@ -631,7 +631,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: 0.0625rem solid #d5d7da;
+  border: 0.0625rem solid var(--kb-outline-secondary);
   border-radius: 0.375rem;
   width: 2.5rem;
   height: 2.5rem;
@@ -651,11 +651,11 @@
   font-size: 0.875rem !important;
   font-weight: 500 !important;
   line-height: 1.25rem !important;
-  color: #414651 !important;
+  color: var(--kb-on-surface-secondary) !important;
 }
 
 .kenui-analytics-dashboard-index li.advanced-controls span {
-  color: #717680;
+  color: var(--kb-on-surface-quaternary);
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -672,8 +672,8 @@
 }
 
 .kenui-analytics-dashboard-index .advanced-controls .form-horizontal {
-  background: #ffffff;
-  border: 0.0625rem solid #e9eaeb;
+  background: var(--kb-neutral-0);
+  border: 0.0625rem solid var(--kb-outline-primary);
   border-radius: 0.5rem;
   padding: 1rem 1.25rem;
   margin-top: 0.625rem;
@@ -700,7 +700,7 @@
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: #414651;
+  color: var(--kb-on-surface-secondary);
   margin: 0;
   padding: 0;
   border: none;
@@ -718,7 +718,7 @@
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: #414651;
+  color: var(--kb-on-surface-secondary);
   margin: 0;
   min-width: 100%;
   flex-shrink: 0;
@@ -741,7 +741,7 @@
 }
 
 .kenui-analytics-dashboard-index .advanced-controls select.form-control:focus {
-  border-color: #1570ef;
+  border-color: var(--kb-primary);
   box-shadow: 0 0 0 0.125rem rgba(21, 112, 239, 0.25);
   outline: none;
 }
@@ -752,9 +752,9 @@
 }
 
 .kenui-analytics-dashboard-index .advanced-controls .btn-default {
-  background-color: #1570ef;
-  border: 0.0625rem solid #1570ef;
-  color: #ffffff;
+  background-color: var(--kb-primary);
+  border: 0.0625rem solid var(--kb-primary);
+  color: var(--kb-neutral-0);
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -765,9 +765,9 @@
 }
 
 .kenui-analytics-dashboard-index .advanced-controls .btn-default:hover {
-  background-color: #0d5bb8;
-  border-color: #0d5bb8;
-  color: #ffffff;
+  background-color: var(--kb-primary-hover);
+  border-color: var(--kb-primary-hover);
+  color: var(--kb-neutral-0);
 }
 
 .kenui-analytics-dashboard-index .advanced-controls .btn-default:focus {
@@ -777,8 +777,8 @@
 
 /* Current Analytics Query Section */
 .kenui-analytics-dashboard-index .well ul li.query-block {
-  background: #ffffff;
-  border: 0.0625rem solid #e9eaeb;
+  background: var(--kb-neutral-0);
+  border: 0.0625rem solid var(--kb-outline-primary);
   border-radius: 0.5rem;
   padding: 0.75rem 1rem;
   margin: 0;
@@ -789,7 +789,7 @@
 }
 
 .kenui-analytics-dashboard-index .well ul li.query-block a {
-  color: #1570ef;
+  color: var(--kb-primary);
   text-decoration: none;
   font-weight: 500;
   font-size: 0.875rem;
@@ -802,20 +802,20 @@
 }
 
 .kenui-analytics-dashboard-index .well ul li.query-block a:hover {
-  color: #0d5bb8;
+  color: var(--kb-primary-hover);
   text-decoration: underline;
 }
 
 .kenui-analytics-dashboard-index .well ul li.query-block pre {
-  background: #ffffff;
-  border: 0.0625rem solid #d5d7da;
+  background: var(--kb-neutral-0);
+  border: 0.0625rem solid var(--kb-outline-secondary);
   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;
+  color: var(--kb-neutral-600);
   overflow-x: auto;
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -826,7 +826,7 @@
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: #414651;
+  color: var(--kb-on-surface-secondary);
   margin: 0;
 }
 
diff --git a/app/assets/stylesheets/kanaui/reports.css b/app/assets/stylesheets/kanaui/reports.css
index 75448df..8118105 100644
--- a/app/assets/stylesheets/kanaui/reports.css
+++ b/app/assets/stylesheets/kanaui/reports.css
@@ -25,7 +25,7 @@
   width: 22px;
   height: 22px;
   padding: 0;
-  color: #6b7280;
+  color: var(--kb-on-surface-tertiary);
   background: transparent;
   border: 0;
   box-shadow: none;
@@ -38,7 +38,7 @@
 
 .kanaui-field-help:hover,
 .kanaui-field-help:focus {
-  color: #111827;
+  color: var(--kb-neutral-800);
   background: transparent;
   outline: none;
 }
@@ -54,9 +54,9 @@
   display: none;
   max-width: 360px;
   padding: 10px 12px;
-  color: #1f2937;
-  background-color: #fff;
-  border: 1px solid #d1d5db;
+  color: var(--kb-neutral-700);
+  background-color: var(--kb-neutral-0);
+  border: 1px solid var(--kb-outline-secondary);
   border-radius: 6px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
   font-size: 14px;
@@ -74,14 +74,14 @@
   height: 0;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
-  border-right: 6px solid #fff;
+  border-right: 6px solid var(--kb-neutral-0);
 }
 
 .kanaui-field-tooltip.is-flipped::before {
   left: auto;
   right: -6px;
   border-right: 0;
-  border-left: 6px solid #fff;
+  border-left: 6px solid var(--kb-neutral-0);
 }
 
 .kanaui-field-tooltip.is-visible {
@@ -95,7 +95,7 @@
 .axis path,
 .axis line {
   fill: none;
-  stroke: #000;
+  stroke: var(--kb-neutral-900);
   shape-rendering: crispEdges;
 }
 
@@ -125,8 +125,8 @@
 }
 
 .focus circle {
-  fill: steelblue;
-  stroke: blue;
+  fill: var(--kb-primary-400);
+  stroke: var(--kb-primary);
 }
 
 @media (max-width: 1000px){
@@ -139,7 +139,7 @@
 .chart_values{
   font-size: 16px;
   font-weight: bold;
-  fill: #202020;
+  fill: var(--kb-neutral-800);
 }
 
 .chart-title-container {
@@ -156,7 +156,7 @@
   font-size: 0.75rem;    
   line-height: 1.125rem; 
   text-align: center;
-  color: #535862;
+  color: var(--kb-on-surface-tertiary);
   white-space: nowrap;
   transform: rotate(-90deg);
 }
@@ -167,17 +167,17 @@
 
 .information{
   fill: rgba(180,180,220,0.8);
-  stroke: #343434;
+  stroke: var(--kb-neutral-700);
 }
 
 .info-title__bg{
   fill: rgba(230, 230, 250, 0.9);
-  stroke: #A4A4A4;
+  stroke: var(--kb-on-surface-quaternary);
 }
 
 .info-title{
   font-size: 22px;
-  fill: #5F5C5C;
+  fill: var(--kb-on-surface-secondary);
 }
 
 .colored-dot{
@@ -201,12 +201,12 @@ button.ColVis_Button, button.ColVis_Button:hover {
     background: inherit;
     box-shadow: unset;
     text-transform: none;
-    color: #333 !important;
-    border-color: #adadad;
+    color: var(--kb-neutral-700) !important;
+    border-color: var(--kb-on-surface-quaternary);
 }
 
 ul.ColVis_collection {
-    background-color: #f3f3f3;
+    background-color: var(--kb-surface-container);
 }
 
 ul.ColVis_collection li, ul.ColVis_collection li:hover{
@@ -216,8 +216,8 @@ ul.ColVis_collection li, ul.ColVis_collection li:hover{
 }
 
 button.ColVis_Button:hover, ul.ColVis_collection li:hover {
-    background-color: #e6e6e6;
-    border-color: #adadad;
+    background-color: var(--kb-outline-primary);
+    border-color: var(--kb-on-surface-quaternary);
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button {
diff --git a/kanaui.gemspec b/kanaui.gemspec
index cf35d54..5db726a 100644
--- a/kanaui.gemspec
+++ b/kanaui.gemspec
@@ -24,7 +24,7 @@ Gem::Specification.new do |s|
   s.add_dependency 'font-awesome-rails'
   s.add_dependency 'jquery-rails', '~> 4.5.1'
   s.add_dependency 'js-routes', '>= 1.1', '< 3.0'
-  s.add_dependency 'killbill-assets-ui'
+  s.add_dependency 'killbill-assets-ui', '>= 1.1.0'
   s.add_dependency 'killbill-client'
   s.required_ruby_version = '>= 3.1.0'
   s.add_dependency 'rails', '~> 7.2'