diff --git a/src/public/assets/theme/default/css/common.css b/src/public/assets/theme/default/css/common.css
new file mode 100644
index 0000000..ade6b97
--- /dev/null
+++ b/src/public/assets/theme/default/css/common.css
@@ -0,0 +1,100 @@
+* {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  color: #666;
+}
+
+body {
+  background: #f2f2f2;
+  font-family: monospace, monospace;
+  font-size: 13px;
+}
+
+header {
+  border-bottom: #999 dashed 1px;
+}
+
+header .logo {
+  display: inline-block;
+  text-decoration: none!important;
+  font-size: 24px;
+  color: #5785b7;
+}
+
+header .logo > span {
+  color: #999;
+}
+
+main {
+  background: #fff;
+  padding: 16px 0;
+}
+
+footer {
+  border-top: #999 dashed 1px;
+}
+
+footer a {
+  line-height: 34px;
+}
+
+h1 {
+  font-size: 18px;
+}
+
+h2 {
+  font-size: 14px;
+  margin-bottom: 16px;
+  background: #f2f2f2;
+  margin-bottom: 16px;
+  padding: 8px 4px;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+table.bordered td {
+  border-bottom: 1px #ccc dotted;
+}
+
+table.bordered tr:last-child td {
+  border-bottom: 0;
+}
+
+th, td {
+  padding: 4px;
+}
+
+tbody tr:hover {
+  background: #f2f2f2;
+}
+
+a, a:hover, a:active, a:visited {
+  color: #5785b7;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+form {
+  float: right;
+}
+
+form > input::placeholder {
+  color: #333;
+}
+
+form > input[type="text"] {
+  padding: 7px 4px;
+  min-width: 260px;
+}
+
+form > button {
+  padding: 7px 4px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/public/assets/theme/default/css/framework.css b/src/public/assets/theme/default/css/framework.css
new file mode 100644
index 0000000..5eb09cf
--- /dev/null
+++ b/src/public/assets/theme/default/css/framework.css
@@ -0,0 +1,108 @@
+.container {
+  position: relative;
+  overflow: hidden;
+  max-width: 1376px;
+  margin: 0 auto;
+}
+
+.row {
+  position: relative;
+  overflow: hidden;
+  padding: 8px;
+}
+
+.column {
+  position: relative;
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-color-green {
+  color: #277b1b;
+}
+
+.text-color-red {
+  color: #d77575;
+}
+
+.text-color-blue {
+  color: #5785b7;
+}
+
+/*
+.background-color-green {
+  background-color: #e9f9e7;
+}
+
+.background-color-red {
+  background-color: #fee;
+}
+*/
+
+.cursor-default {
+  cursor: default;
+}
+
+.font-size-22 {
+  font-size: 22px;
+}
+
+.padding-0 {
+  padding: 0;
+}
+
+.padding-4 {
+  padding: 4px;
+}
+
+.margin-y-8 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.margin-bottom-8 {
+  margin-bottom: 8px;
+}
+
+.margin-left-16 {
+  margin-left: 16px;
+}
+
+/* responsive rules */
+
+.width-100 {
+  width: 100%;
+}
+
+.width-50 {
+  width: 50%;
+}
+
+@media (max-width: 1220px) {
+
+  .width-tablet-100 {
+    width: 100%;
+  }
+}
+
+@media (max-width: 512px) {
+
+  .width-mobile-100 {
+    width: 100%;
+  }
+}
diff --git a/src/public/assets/theme/default/css/yggverse/graph/calendar/month.css b/src/public/assets/theme/default/css/yggverse/graph/calendar/month.css
new file mode 100644
index 0000000..259bc6d
--- /dev/null
+++ b/src/public/assets/theme/default/css/yggverse/graph/calendar/month.css
@@ -0,0 +1,133 @@
+/*
+ * this file implements yggverse/graph UI
+ *
+ * for any feedback visit official page:
+ * https://github.com/YGGverse/graph-php
+ *
+ */
+
+.yggverse_graph_calendar__month {
+  max-width: 672px;
+  overflow: hidden
+}
+
+.yggverse_graph_calendar__month > .day {
+  position:relative;
+  width:96px;
+  height:96px;
+  float: left;
+  background: #fff;
+}
+
+.yggverse_graph_calendar__month > .day:hover {
+  background: #f2f2f2
+}
+
+.yggverse_graph_calendar__month > .day > .number {
+  position: absolute;
+  z-index: 99;
+  top: 4px;
+  left: 4px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  opacity: 0.8;
+  line-height: 16px;
+  font-size: 10px;
+  text-align: center;
+  color: #888;
+}
+
+.yggverse_graph_calendar__month > .day > .number.disabled {
+  color: #ccc;
+}
+
+/*
+ * daily layer (z-index reserved 1-2)
+ */
+.yggverse_graph_calendar__month > .day > .layer0 > .label {
+  position: absolute;
+  z-index: 2;
+  top: 4px;
+  right: 4px;
+  padding: 2px;
+  background: #fff;
+  border-radius: 3px;
+  opacity: 0.8;
+  font-size: 8px;
+  color: #888;
+  display: none
+}
+
+.yggverse_graph_calendar__month > .day:hover > .layer0 > .label {
+  display: block;
+}
+
+.yggverse_graph_calendar__month > .day > .layer0 > .label > .red {
+  color: #d77575;
+}
+
+.yggverse_graph_calendar__month > .day > .layer0 > .label > .green {
+  color: #277b1b;
+}
+
+.yggverse_graph_calendar__month > .day > .layer0 > .label > .blue {
+  color: #5785b7;
+}
+
+.yggverse_graph_calendar__month > .day > .layer0 > .value {
+  position:absolute;
+  z-index: 1;
+  bottom: 0;
+  opacity: 0.5;
+}
+
+.yggverse_graph_calendar__month > .day > .layer0 > .value.red {
+  background: #d77575;
+}
+
+.yggverse_graph_calendar__month > .day > .layer0 > .value.green {
+  background: #277b1b;
+}
+
+.yggverse_graph_calendar__month > .day > .layer0 > .value.blue {
+  background: #5785b7;
+}
+
+/*
+/* hourly layer (z-index reserved 4)
+ */
+.yggverse_graph_calendar__month > .day > .layer1 > .label {
+  display: none
+}
+
+.yggverse_graph_calendar__month > .day > .layer1 > .label > .red {
+  color: #d77575;
+}
+
+.yggverse_graph_calendar__month > .day > .layer1 > .label > .green {
+  color: #277b1b;
+}
+
+.yggverse_graph_calendar__month > .day > .layer1 > .label > .blue {
+  color: #5785b7;
+}
+
+.yggverse_graph_calendar__month > .day > .layer1 > .value {
+  position:absolute;
+  z-index: 4;
+  bottom: 0;
+}
+
+.yggverse_graph_calendar__month > .day > .layer1 > .value.red {
+  background: #d77575;
+}
+
+.yggverse_graph_calendar__month > .day > .layer1 > .value.green {
+  background: #277b1b;
+}
+
+.yggverse_graph_calendar__month > .day > .layer1 > .value.blue {
+  background: #5785b7;
+}
\ No newline at end of file