diff --git a/dist/theme/modern.css b/dist/theme/modern.css
new file mode 100644
index 000000000..06401d3f1
--- /dev/null
+++ b/dist/theme/modern.css
@@ -0,0 +1,306 @@
+/*!
+ * Copyright (c) 2017 ~ present NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ *
+ * billboard.js, JavaScript chart library
+ * https://naver.github.io/billboard.js/
+ *
+ * @version 3.10.0
+ */
+@charset "UTF-8";
+/*-- Insight Theme --*/
+/*-- Default color pattern --*/
+.bb-color-pattern {
+  background-image: url("#7ea9fa;#ffcd1e;#d33043;#41c464;#c86b74;#006bc2;#2a7e41;#f27c00;#c159ff;#bed017;"); }
+
+/*-- Chart --*/
+.bb svg {
+  font-size: 12px;
+  font-family: -apple-system, "system-ui", "Noto Sans", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
+  line-height: 1; }
+
+.bb path, .bb line {
+  fill: none;
+  stroke: #cecece; }
+
+.bb text, .bb .bb-button {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  fill: #555;
+  font-size: 10.5px; }
+
+.bb-legend-item-title,
+.bb-xgrid-focus,
+.bb-ygrid-focus,
+.bb-ygrid {
+  shape-rendering: crispEdges; }
+
+.bb-chart-arcs .bb-needle {
+  fill: #000; }
+
+/*-- Axis --*/
+.bb-axis {
+  shape-rendering: crispEdges; }
+
+.bb-axis-y text, .bb-axis-y2 text {
+  fill: #737373; }
+
+.bb-event-rects {
+  fill-opacity: 1 !important; }
+  .bb-event-rects .bb-event-rect {
+    fill: transparent; }
+  .bb-event-rects .bb-event-rect._active_ {
+    fill: rgba(39, 201, 3, 0.05); }
+
+.tick._active_ text {
+  fill: #00c83c !important; }
+
+/*-- Grid --*/
+.bb-grid {
+  pointer-events: none; }
+  .bb-grid line {
+    stroke: #f1f1f1; }
+
+.bb-xgrid-focus line, .bb-ygrid-focus line {
+  stroke: #d2bad8; }
+
+/*-- Text on Chart --*/
+.bb-text.bb-empty {
+  fill: #767676; }
+
+/*-- Line --*/
+.bb-line {
+  stroke-width: 1px; }
+
+/*-- Point --*/
+.bb-circle._expanded_ {
+  stroke-width: 2px;
+  stroke: red; }
+
+rect.bb-circle._expanded_, use.bb-circle._expanded_ {
+  stroke-width: 1px; }
+
+.bb-selected-circle {
+  fill: white;
+  stroke-width: 2px; }
+
+/*-- Bar --*/
+.bb-bar {
+  stroke-width: 0; }
+  .bb-bar._expanded_ {
+    fill-opacity: 0.75; }
+
+/*-- Candlestick --*/
+.bb-candlestick {
+  stroke-width: 1px; }
+  .bb-candlestick._expanded_ {
+    fill-opacity: 0.75; }
+
+/*-- Focus --*/
+.bb-target.bb-focused, .bb-circles.bb-focused {
+  opacity: 1; }
+  .bb-target.bb-focused path.bb-line, .bb-target.bb-focused path.bb-step, .bb-circles.bb-focused path.bb-line, .bb-circles.bb-focused path.bb-step {
+    stroke-width: 2px; }
+
+.bb-target.bb-defocused, .bb-circles.bb-defocused {
+  opacity: 0.3 !important; }
+  .bb-target.bb-defocused .text-overlapping, .bb-circles.bb-defocused .text-overlapping {
+    opacity: .05 !important; }
+
+/*-- Region --*/
+.bb-region rect {
+  fill: #71808d;
+  fill-opacity: 0.1; }
+
+.bb-region.selected rect {
+  fill: #27c903; }
+
+/*-- Zoom region --*/
+.bb-zoom-brush {
+  fill-opacity: .1;
+  fill: #838181; }
+
+/*-- Brush --*/
+.bb-brush .extent {
+  fill-opacity: 0.1; }
+
+.bb-brush .selection {
+  fill: #838181;
+  fill-opacity: 0.2; }
+
+.bb-brush path {
+  stroke: #838181; }
+
+/*-- Select - Drag --*/
+/*-- Legend --*/
+.bb-legend-item {
+  user-select: none; }
+  .bb-legend-item line.bb-legend-item-tile {
+    stroke-linecap: round;
+    transform: translate(7px, 1px);
+    stroke-dasharray: 1 20; }
+
+.bb-legend-item-hidden {
+  opacity: 0.15; }
+
+.bb-legend-background {
+  opacity: 0.75;
+  fill: white;
+  stroke: lightgray;
+  stroke-width: 1; }
+
+/*-- Title --*/
+.bb-title {
+  font-size: 14px; }
+
+/*-- Treemap --*/
+.bb-chart-treemaps rect {
+  stroke: #000;
+  stroke-width: 0.5px; }
+
+/*-- Tooltip --*/
+.bb-tooltip-container {
+  z-index: 10;
+  font-family: -apple-system, "system-ui", "Noto Sans", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
+  user-select: none; }
+
+.bb-tooltip {
+  border-collapse: separate;
+  border-spacing: 0;
+  empty-cells: show;
+  border: 1px solid #999;
+  color: #fff;
+  border-radius: 5px;
+  background-color: #404244;
+  text-align: left;
+  font-size: 11px;
+  white-space: nowrap;
+  opacity: 0.9; }
+  .bb-tooltip th {
+    font-size: 11px;
+    padding: 3px 6px 0 6px;
+    text-align: left; }
+  .bb-tooltip td {
+    padding: 3px; }
+    .bb-tooltip td:first-child {
+      padding-left: 7px; }
+    .bb-tooltip td:last-child {
+      padding-right: 8px; }
+    .bb-tooltip td > span, .bb-tooltip td > svg {
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      margin-right: 6px;
+      border-radius: 5px;
+      vertical-align: middle; }
+    .bb-tooltip td.value {
+      border-left: 1px solid transparent;
+      text-align: right; }
+  .bb-tooltip .bb-tooltip-title {
+    display: inline-block;
+    color: #aaa;
+    line-height: 20px; }
+  .bb-tooltip .bb-tooltip-detail table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+  .bb-tooltip .bb-tooltip-detail .bb-tooltip-name, .bb-tooltip .bb-tooltip-detail .bb-tooltip-value {
+    font-size: 11px;
+    line-height: 13px;
+    padding: 4px 0 3px;
+    color: #444;
+    text-align: left;
+    font-weight: normal; }
+  .bb-tooltip .bb-tooltip-detail .bb-tooltip-value {
+    padding-left: 5px;
+    font-weight: 800;
+    font-size: 12px; }
+
+/*-- Area --*/
+.bb-area {
+  stroke-width: 0;
+  opacity: 0.2; }
+
+/*-- Arc --*/
+.bb-chart-arcs-title {
+  dominant-baseline: middle;
+  font-size: 1.3em; }
+
+text.bb-chart-arcs-gauge-title {
+  dominant-baseline: middle;
+  font-size: 2.7em; }
+
+.bb-chart-arcs {
+  /*-- Polar --*/ }
+  .bb-chart-arcs .bb-chart-arcs-background {
+    fill: #e0e0e0;
+    stroke: #ccc; }
+  .bb-chart-arcs .bb-chart-arcs-gauge-unit {
+    fill: #000;
+    font-size: 16px; }
+  .bb-chart-arcs .bb-chart-arcs-gauge-min, .bb-chart-arcs .bb-chart-arcs-gauge-max {
+    fill: #777; }
+  .bb-chart-arcs .bb-chart-arcs-title {
+    font-size: 1.8em;
+    fill: #000;
+    font-weight: 600; }
+  .bb-chart-arcs path.empty {
+    fill: #eaeaea;
+    stroke-width: 0; }
+  .bb-chart-arcs .bb-levels circle {
+    fill: none;
+    stroke: #cecece;
+    stroke-width: .5px; }
+  .bb-chart-arcs .bb-levels text {
+    fill: #848282; }
+
+.bb-chart-arc .bb-gauge-value {
+  fill: #000; }
+
+.bb-chart-arc path {
+  stroke: #fff; }
+
+.bb-chart-arc rect {
+  stroke: #fff;
+  stroke-width: 1; }
+
+.bb-chart-arc text {
+  fill: #fff;
+  font-size: 11px; }
+
+/*-- Radar --*/
+.bb-chart-radars .bb-levels polygon {
+  fill: none;
+  stroke: #cecece;
+  stroke-width: .5px; }
+
+.bb-chart-radars .bb-levels text {
+  fill: #848282; }
+
+.bb-chart-radars .bb-axis line {
+  stroke: #cecece;
+  stroke-width: .5px; }
+
+.bb-chart-radars .bb-axis text {
+  font-size: 1.15em;
+  cursor: default; }
+
+.bb-chart-radars .bb-shapes polygon {
+  fill-opacity: .2;
+  stroke-width: 1px; }
+
+/*-- Button --*/
+.bb-button {
+  position: absolute;
+  top: 10px;
+  right: 10px; }
+  .bb-button .bb-zoom-reset {
+    border: 1px solid #999;
+    background-color: #404244;
+    color: #fff;
+    opacity: 0.9;
+    padding: 5px;
+    border-radius: 5px;
+    cursor: pointer; }
+
diff --git a/dist/theme/modern.min.css b/dist/theme/modern.min.css
new file mode 100644
index 000000000..672d615ab
--- /dev/null
+++ b/dist/theme/modern.min.css
@@ -0,0 +1,10 @@
+@charset "UTF-8";
+/*!
+ * Copyright (c) 2017 ~ present NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ *
+ * billboard.js, JavaScript chart library
+ * https://naver.github.io/billboard.js/
+ *
+ * @version 3.10.0
+ */.bb-color-pattern{background-image:url(#7ea9fa;#ffcd1e;#d33043;#41c464;#c86b74;#006bc2;#2a7e41;#f27c00;#c159ff;#bed017;)}.bb svg{font-family:-apple-system,"system-ui",Noto Sans,Malgun Gothic,맑은 고딕,helvetica,Apple SD Gothic Neo,sans-serif;font-size:12px;line-height:1}.bb line,.bb path{fill:none;stroke:#cecece}.bb .bb-button,.bb text{fill:#555;font-size:10.5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bb-legend-item-title,.bb-xgrid-focus,.bb-ygrid,.bb-ygrid-focus{shape-rendering:crispEdges}.bb-chart-arcs .bb-needle{fill:#000}.bb-axis{shape-rendering:crispEdges}.bb-axis-y text,.bb-axis-y2 text{fill:#737373}.bb-event-rects{fill-opacity:1!important}.bb-event-rects .bb-event-rect{fill:transparent}.bb-event-rects .bb-event-rect._active_{fill:rgba(39,201,3,.05)}.tick._active_ text{fill:#00c83c!important}.bb-grid{pointer-events:none}.bb-grid line{stroke:#f1f1f1}.bb-xgrid-focus line,.bb-ygrid-focus line{stroke:#d2bad8}.bb-text.bb-empty{fill:#767676}.bb-line{stroke-width:1px}.bb-circle._expanded_{stroke-width:2px;stroke:red}rect.bb-circle._expanded_,use.bb-circle._expanded_{stroke-width:1px}.bb-selected-circle{fill:#fff;stroke-width:2px}.bb-bar{stroke-width:0}.bb-bar._expanded_{fill-opacity:.75}.bb-candlestick{stroke-width:1px}.bb-candlestick._expanded_{fill-opacity:.75}.bb-circles.bb-focused,.bb-target.bb-focused{opacity:1}.bb-circles.bb-focused path.bb-line,.bb-circles.bb-focused path.bb-step,.bb-target.bb-focused path.bb-line,.bb-target.bb-focused path.bb-step{stroke-width:2px}.bb-circles.bb-defocused,.bb-target.bb-defocused{opacity:.3!important}.bb-circles.bb-defocused .text-overlapping,.bb-target.bb-defocused .text-overlapping{opacity:.05!important}.bb-region rect{fill:#71808d;fill-opacity:.1}.bb-region.selected rect{fill:#27c903}.bb-zoom-brush{fill-opacity:.1;fill:#838181}.bb-brush .extent{fill-opacity:.1}.bb-brush .selection{fill:#838181;fill-opacity:.2}.bb-brush path{stroke:#838181}.bb-legend-item{user-select:none}.bb-legend-item line.bb-legend-item-tile{stroke-linecap:round;stroke-dasharray:1 20;transform:translate(7px,1px)}.bb-legend-item-hidden{opacity:.15}.bb-legend-background{fill:#fff;stroke:#d3d3d3;stroke-width:1;opacity:.75}.bb-title{font-size:14px}.bb-chart-treemaps rect{stroke:#000;stroke-width:.5px}.bb-tooltip-container{font-family:-apple-system,"system-ui",Noto Sans,Malgun Gothic,맑은 고딕,helvetica,Apple SD Gothic Neo,sans-serif;user-select:none;z-index:10}.bb-tooltip{background-color:#404244;border:1px solid #999;border-collapse:separate;border-radius:5px;border-spacing:0;color:#fff;empty-cells:show;opacity:.9;white-space:nowrap}.bb-tooltip,.bb-tooltip th{font-size:11px;text-align:left}.bb-tooltip th{padding:3px 6px 0}.bb-tooltip td{padding:3px}.bb-tooltip td:first-child{padding-left:7px}.bb-tooltip td:last-child{padding-right:8px}.bb-tooltip td>span,.bb-tooltip td>svg{border-radius:5px;display:inline-block;height:7px;margin-right:6px;vertical-align:middle;width:7px}.bb-tooltip td.value{border-left:1px solid transparent;text-align:right}.bb-tooltip .bb-tooltip-title{color:#aaa;display:inline-block;line-height:20px}.bb-tooltip .bb-tooltip-detail table{border-collapse:collapse;border-spacing:0}.bb-tooltip .bb-tooltip-detail .bb-tooltip-name,.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{color:#444;font-size:11px;font-weight:400;line-height:13px;padding:4px 0 3px;text-align:left}.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{font-size:12px;font-weight:800;padding-left:5px}.bb-area{stroke-width:0;opacity:.2}.bb-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}text.bb-chart-arcs-gauge-title{dominant-baseline:middle;font-size:2.7em}.bb-chart-arcs .bb-chart-arcs-background{fill:#e0e0e0;stroke:#ccc}.bb-chart-arcs .bb-chart-arcs-gauge-unit{fill:#000;font-size:16px}.bb-chart-arcs .bb-chart-arcs-gauge-max,.bb-chart-arcs .bb-chart-arcs-gauge-min{fill:#777}.bb-chart-arcs .bb-chart-arcs-title{fill:#000;font-size:1.8em;font-weight:600}.bb-chart-arcs path.empty{fill:#eaeaea;stroke-width:0}.bb-chart-arcs .bb-levels circle{fill:none;stroke:#cecece;stroke-width:.5px}.bb-chart-arcs .bb-levels text{fill:#848282}.bb-chart-arc .bb-gauge-value{fill:#000}.bb-chart-arc path{stroke:#fff}.bb-chart-arc rect{stroke:#fff;stroke-width:1}.bb-chart-arc text{fill:#fff;font-size:11px}.bb-chart-radars .bb-levels polygon{fill:none;stroke:#cecece;stroke-width:.5px}.bb-chart-radars .bb-levels text{fill:#848282}.bb-chart-radars .bb-axis line{stroke:#cecece;stroke-width:.5px}.bb-chart-radars .bb-axis text{cursor:default;font-size:1.15em}.bb-chart-radars .bb-shapes polygon{fill-opacity:.2;stroke-width:1px}.bb-button{position:absolute;right:10px;top:10px}.bb-button .bb-zoom-reset{background-color:#404244;border:1px solid #999;border-radius:5px;color:#fff;cursor:pointer;opacity:.9;padding:5px}
\ No newline at end of file