diff --git a/.gitignore b/.gitignore
index 722f233..222eb2c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 node_modules/
-package-lock.json
 .shadow-cljs/
 .cpcache
 resources/public/assets/js
diff --git a/resources/public/suitkin/css/stylo.css b/resources/public/suitkin/css/stylo.css
index fc159b8..4c42904 100644
--- a/resources/public/suitkin/css/stylo.css
+++ b/resources/public/suitkin/css/stylo.css
@@ -90,10 +90,129 @@ img, video {
   height: auto;
 }
 
+.c-77456740 {
+  background-color: var(--basic-gray-0);
+  color: var(--basic-gray-7);
+  border: 1px solid var(--basic-gray-4);
+}
+
+.c-77456740:hover {
+  background-color: var(--basic-gray-1);
+}
+
+.c-77456740:active {
+  background-color: var(--basic-gray-2);
+}
+
+.c-77456740:disabled {
+  background-color: rgba(219, 221, 227, 0.15);
+  color: var(--basic-gray-3);
+  border: 1px solid var(--basic-gray-3);
+}
+
+.c-77456740:disabled .button-icon {
+  filter: invert(96%) sepia(2%) saturate(881%) hue-rotate(190deg) brightness(84%) contrast(83%);
+}
+
+.c-77456740 .button-icon {
+  filter: invert(12%) sepia(21%) saturate(974%) hue-rotate(187deg) brightness(93%) contrast(91%);
+}
+
 .suitkin_components_sidebar-72-24 {
   width: 100%;
 }
 
+.c838488944 {
+  background-color: inherit;
+  color: var(--basic-gray-7);
+}
+
+.c838488944:hover {
+  background-color: var(--basic-gray-1);
+}
+
+.c838488944:active {
+  background-color: var(--basic-gray-2);
+}
+
+.c838488944:disabled {
+  background-color: inherit;
+  color: var(--basic-gray-3);
+}
+
+.c838488944:disabled .button-icon {
+  filter: invert(96%) sepia(2%) saturate(881%) hue-rotate(190deg) brightness(84%) contrast(83%);
+}
+
+.c838488944 .button-icon {
+  filter: invert(12%) sepia(21%) saturate(974%) hue-rotate(187deg) brightness(93%) contrast(91%);
+}
+
+.c1033924637 {
+  background-color: inherit;
+  color: var(--basic-red-6);
+}
+
+.c1033924637:hover {
+  background-color: rgba(254, 231, 228, 0.40);
+}
+
+.c1033924637:active {
+  background-color: rgba(254, 231, 228, 0.80);
+}
+
+.c1033924637:disabled {
+  background-color: inherit;
+  color: var(--basic-gray-3);
+}
+
+.c1033924637:disabled .button-icon {
+  filter: invert(96%) sepia(2%) saturate(881%) hue-rotate(190deg) brightness(84%) contrast(83%);
+}
+
+.c1033924637 .button-icon {
+  filter: invert(16%) sepia(78%) saturate(3482%) hue-rotate(357deg) brightness(106%) contrast(94%);
+}
+
+.c285751859 {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.suitkin_components_sidebar_view-20-29 {
+  width: 100%;
+}
+
+.suitkin_components_sidebar_styles-45-3 {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+}
+
+.suitkin_components_sidebar_styles-45-3 .chevron {
+  transition: .15s transform ease;
+}
+
+.suitkin_components_sidebar_styles-45-3 details[open] .chevron {
+  transform: rotate(90deg);
+}
+
+.c2002126359 {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+}
+
+.c2002126359 .chevron {
+  transition: .15s transform ease;
+}
+
+.c2002126359 details[open] .chevron {
+  transform: rotate(90deg);
+}
+
 .suitkin_components_button-32-3 {
   background-color: var(--basic-red-5);
   color: var(--white);
@@ -130,6 +249,13 @@ img, video {
   width: 100%;
 }
 
+.suitkin_components_sidebar_view-14-17 {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .suitkin_components_button-48-3 {
   background-color: inherit;
   color: var(--basic-red-6);
@@ -156,6 +282,55 @@ img, video {
   filter: invert(16%) sepia(78%) saturate(3482%) hue-rotate(357deg) brightness(106%) contrast(94%);
 }
 
+.suitkin_components_sidebar_styles-34-3 {
+  width: 100%;
+}
+
+.suitkin_components_sidebar_styles-34-3 details {
+  width: 100%;
+}
+
+.suitkin_components_sidebar_styles-34-3 a {
+  width: 100%;
+&:hover-background-color: var(--basic-gray-0);
+}
+
+.suitkin_components_sidebar_styles-34-3 a:active {
+  background-color: var(--basic-gray-1);
+}
+
+.suitkin_components_sidebar_styles-34-3 summary:hover {
+  background-color: var(--basic-gray-0);
+}
+
+.suitkin_components_sidebar_styles-34-3 summary:active {
+  background-color: var(--basic-gray-1);
+}
+
+.suitkin_components_sidebar_styles-34-3 a.item-active {
+  background-color: var(--basic-gray-1);
+}
+
+.suitkin_components_sidebar_styles-24-3 {
+  padding-bottom: 14px;
+  height: auto;
+  align-items: center;
+  font-weight: 800;
+  font-size: 16px;
+  padding-right: 16px;
+  letter-spacing: 0.48px;
+  display: flex;
+  color: #353B50;
+  padding-left: 16px;
+  padding-top: 14px;
+}
+
+.suitkin_components_sidebar_styles-24-3>*+* {
+  --space-x-reverse: 0;
+  margin-right: calc(4px * var(--space-x-reverse));
+  margin-left: calc(4px * calc(1 - var(--space-x-reverse)));
+}
+
 .suitkin_components_button-16-3 {
   background-color: var(--basic-gray-0);
   color: var(--basic-gray-7);
@@ -184,12 +359,51 @@ img, video {
   filter: invert(12%) sepia(21%) saturate(974%) hue-rotate(187deg) brightness(93%) contrast(91%);
 }
 
+.c1217557035 {
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.c1217557035:disabled {
+  cursor: not-allowed;
+}
+
+.c1217557035:focus {
+  outline: 0;
+}
+
+.suitkin_components_sidebar_view-15-50 {
+  padding-right: 8px;
+}
+
+.c-351277325 {
+  padding-right: 8px;
+}
+
 .ui_properties-8-17 {
   margin-top: 1.0rem;
   border-top-width: 1px;
   padding-top: 1.0rem;
 }
 
+.c-1393660714 {
+  width: 100%;
+}
+
+.c-898518566 {
+  display: flex;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 4px;
+  overflow-y: auto;
+  height: 100%;
+}
+
 .suitkin_components_button-59-3 {
   border-radius: 4px;
   display: inline-flex;
@@ -208,6 +422,10 @@ img, video {
   outline: 0;
 }
 
+.suitkin_components_sidebar_view-26-24 {
+  width: 100%;
+}
+
 .suitkin_components_sidebar-34-3 {
   width: 100%;
 }
@@ -242,6 +460,19 @@ img, video {
   background-color: var(--basic-gray-1);
 }
 
+.c-389514406 {
+  flex-flow: column;
+  line-height: 20px;
+  width: 240px;
+  height: 100vh;
+  border-right: 1px solid var(--basic-gray-2,red);
+  word-spacing: -1px;
+  font-size: 14px;
+  letter-spacing: 0.33px;
+  display: flex;
+  color: var(--basic-gray-7);
+}
+
 .suitkin_components_sidebar-55-17 {
   display: flex;
   overflow: hidden;
@@ -253,6 +484,10 @@ img, video {
   margin-right: 8px;
 }
 
+.c-938554372 {
+  margin-right: 8px;
+}
+
 .suitkin_components_sidebar-45-3 {
   display: flex;
   user-select: none;
@@ -267,6 +502,58 @@ img, video {
   transform: rotate(90deg);
 }
 
+.c1716753689 {
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.suitkin_components_sidebar_view-17-51 {
+  padding-right: 8px;
+}
+
+.c-657727210 {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.suitkin_components_sidebar_view-21-30 {
+  display: flex;
+  justify-content: space-between;
+}
+
+.c-1216520275 {
+  padding-bottom: 14px;
+  height: auto;
+  align-items: center;
+  font-weight: 800;
+  font-size: 16px;
+  padding-right: 16px;
+  letter-spacing: 0.48px;
+  display: flex;
+  color: #353B50;
+  padding-left: 16px;
+  padding-top: 14px;
+}
+
+.c-1216520275>*+* {
+  --space-x-reverse: 0;
+  margin-right: calc(4px * var(--space-x-reverse));
+  margin-left: calc(4px * calc(1 - var(--space-x-reverse)));
+}
+
+.suitkin_components_sidebar_styles-63-3 {
+  display: flex;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 4px;
+  overflow-y: auto;
+  height: 100%;
+}
+
 .suitkin_components_button-55-26 {
   padding-left: 16px;
   padding-right: 16px;
@@ -288,6 +575,15 @@ img, video {
   height: 100%;
 }
 
+.suitkin_components_sidebar_styles-50-3 {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-content: space-between;
+  padding: 6px 16px 6px 16px;
+}
+
 .ui_properties-10-18 {
   margin-top: 0.5rem;
 }
@@ -298,18 +594,226 @@ img, video {
   margin-top: calc(0.25rem * calc(1 - var(--space-y-reverse)));
 }
 
+.c1759832568 {
+  background-color: rgba(254, 231, 228, 0.15);
+  color: var(--basic-red-6);
+  border: 1px solid var(--basic-red-5);
+}
+
+.c1759832568:hover {
+  background-color: rgba(254, 231, 228, 0.40);
+}
+
+.c1759832568:active {
+  background-color: rgba(254, 231, 228, 0.80);
+}
+
+.c1759832568:disabled {
+  background-color: rgba(219, 221, 227, 0.15);
+  color: var(--basic-gray-3);
+  border: 1px solid var(--basic-gray-3);
+}
+
+.c1759832568:disabled .button-icon {
+  filter: invert(96%) sepia(2%) saturate(881%) hue-rotate(190deg) brightness(84%) contrast(83%);
+}
+
+.c1759832568 .button-icon {
+  filter: invert(16%) sepia(78%) saturate(3482%) hue-rotate(357deg) brightness(106%) contrast(94%);
+}
+
+.c176274011 {
+  width: 100%;
+}
+
+.c176274011 details {
+  width: 100%;
+}
+
+.c176274011 a {
+  width: 100%;
+  padding: 6px 16px 6px 16px;
+  border-radius: 4px;
+}
+
+.c176274011 a:hover {
+  background-color: var(--basic-gray-0);
+}
+
+.c176274011 a:active {
+  background-color: var(--basic-gray-1);
+}
+
+.c176274011 summary {
+  border-radius: 4px;
+}
+
+.c176274011 summary:hover {
+  background-color: var(--basic-gray-0);
+}
+
+.c176274011 summary:active {
+  background-color: var(--basic-gray-1);
+}
+
+.c176274011 a.item-active {
+  background-color: var(--basic-gray-1);
+}
+
+.c1701454752 {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-content: space-between;
+  padding: 6px 16px 6px 16px;
+}
+
 .ui_properties-16-27 {
   border-width: 1px;
   padding: 0.25rem;
   border-radius: 0.25rem;
 }
 
+.suitkin_components_sidebar_styles-53-3 {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+}
+
+.suitkin_components_sidebar_styles-53-3 .chevron {
+  transition: .15s transform ease;
+}
+
+.suitkin_components_sidebar_styles-53-3 details[open] .chevron {
+  transform: rotate(90deg);
+}
+
+.suitkin_components_sidebar_styles-48-3 {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+}
+
+.suitkin_components_sidebar_styles-48-3 .chevron {
+  transition: .15s transform ease;
+}
+
+.suitkin_components_sidebar_styles-48-3 details[open] .chevron {
+  transform: rotate(90deg);
+}
+
+.suitkin_components_sidebar_styles-49-3 {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-content: space-between;
+  padding: 6px 16px 6px 16px;
+  border-radius: 4px;
+}
+
+.suitkin_components_sidebar_styles-49-3 img {
+  display: inline-block;
+}
+
+.c-1768640623 {
+  width: 100%;
+}
+
+.c-1768640623 summary {
+  padding: 6px 16px 6px 16px;
+  border-radius: 4px;
+}
+
+.c-1768640623 summary:hover {
+  background-color: var(--basic-gray-0);
+}
+
+.c-1768640623 summary:active {
+  background-color: var(--basic-gray-1);
+}
+
+.c-1768640623 a.item-active {
+  background-color: var(--basic-gray-1);
+}
+
+.c-1768640623 a {
+  padding: 6px 16px 6px 16px;
+  border-radius: 4px;
+}
+
+.c-1768640623 a:hover {
+  background-color: var(--basic-gray-0);
+}
+
+.c-1768640623 a:active {
+  background-color: var(--basic-gray-1);
+}
+
+.suitkin_components_sidebar_view-10-50 {
+  padding-right: 8px;
+}
+
+.suitkin_components_sidebar_styles-57-3 {
+  display: flex;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 4px;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.suitkin_components_sidebar_view-15-18 {
+  display: flex;
+}
+
 .ui_properties-13-23 {
   opacity: 0.5;
   display: inline-flex;
   width: 100px;
 }
 
+.suitkin_components_sidebar_styles-54-3 {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+}
+
+.suitkin_components_sidebar_styles-54-3 .chevron {
+  transition: .15s transform ease;
+}
+
+.suitkin_components_sidebar_styles-54-3 details[open] .chevron {
+  transform: rotate(90deg);
+}
+
+.c239527376 {
+  background-color: var(--basic-red-5);
+  color: var(--white);
+}
+
+.c239527376:hover {
+  background-color: var(--basic-red-7);
+}
+
+.c239527376:active {
+  background-color: var(--basic-red-8);
+}
+
+.c239527376:disabled {
+  background-color: var(--basic-gray-2);
+  color: var(--basic-gray-4);
+}
+
+.c239527376:disabled .button-icon {
+  filter: invert(55%) sepia(9%) saturate(277%) hue-rotate(186deg) brightness(95%) contrast(86%);
+}
+
+.c239527376 .button-icon {
+  filter: invert(100%) sepia(17%) saturate(2%) hue-rotate(233deg) brightness(108%) contrast(101%);
+}
+
 .suitkin_components_button-56-26 {
   padding-left: 20px;
   padding-right: 20px;
@@ -344,6 +848,17 @@ img, video {
   filter: invert(100%) sepia(17%) saturate(2%) hue-rotate(233deg) brightness(108%) contrast(101%);
 }
 
+.c-1080531189 {
+  padding: 4px;
+  margin-bottom: 16px;
+  border-top: 1px solid var(--basic-gray-2,red);
+}
+
+.c1088204724 {
+  display: flex;
+  justify-content: space-between;
+}
+
 .suitkin_components_button-24-3 {
   background-color: inherit;
   color: var(--basic-gray-7);
@@ -370,16 +885,82 @@ img, video {
   filter: invert(12%) sepia(21%) saturate(974%) hue-rotate(187deg) brightness(93%) contrast(91%);
 }
 
+.suitkin_components_sidebar_styles-62-3 {
+  display: flex;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 4px;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.suitkin_components_sidebar_styles-55-3 {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+}
+
+.suitkin_components_sidebar_styles-55-3 .chevron {
+  transition: .15s transform ease;
+}
+
+.suitkin_components_sidebar_styles-55-3 details[open] .chevron {
+  transform: rotate(90deg);
+}
+
+.suitkin_components_sidebar_view-9-17 {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ui_navigation-15-17 {
   height: 100%;
 }
 
+.c717984533 {
+  background-color: var(--basic-gray-4);
+  color: var(--white);
+}
+
+.c717984533:hover {
+  background-color: var(--basic-gray-5);
+}
+
+.c717984533:active {
+  background-color: var(--basic-gray-6);
+}
+
+.c717984533:disabled {
+  background-color: var(--basic-gray-2);
+  color: var(--basic-gray-4);
+  cursor: not-allowed;
+}
+
+.c717984533:disabled .button-icon {
+  filter: invert(55%) sepia(9%) saturate(277%) hue-rotate(186deg) brightness(95%) contrast(86%);
+}
+
+.c717984533 .button-icon {
+  filter: invert(100%) sepia(17%) saturate(2%) hue-rotate(233deg) brightness(108%) contrast(101%);
+}
+
 .suitkin_components_sidebar-18-3 {
   padding: 4px;
   margin-bottom: 16px;
   border-top: 1px solid var(--basic-gray-2,red);
 }
 
+.suitkin_components_sidebar_styles-60-3 {
+  display: flex;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 4px;
+  overflow-y: auto;
+  height: 100%;
+}
+
 .suitkin_components_sidebar-6-3 {
   flex-flow: column;
   line-height: 20px;
@@ -393,6 +974,15 @@ img, video {
   color: var(--basic-gray-7);
 }
 
+.suitkin_components_sidebar_styles-64-3 {
+  display: flex;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 4px;
+  overflow-y: auto;
+  height: 100%;
+}
+
 .suitkin_components_sidebar-24-3 {
   padding-bottom: 14px;
   height: auto;
@@ -443,4 +1033,35 @@ img, video {
 
 .suitkin_components_button-40-3 .button-icon {
   filter: invert(16%) sepia(78%) saturate(3482%) hue-rotate(357deg) brightness(106%) contrast(94%);
+}
+
+.suitkin_components_sidebar_view-16-51 {
+  padding-right: 8px;
+}
+
+.suitkin_components_sidebar_styles-51-3 {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-content: space-between;
+}
+
+.suitkin_components_sidebar_styles-18-3 {
+  padding: 4px;
+  margin-bottom: 16px;
+  border-top: 1px solid var(--basic-gray-2,red);
+}
+
+.suitkin_components_sidebar_styles-6-3 {
+  flex-flow: column;
+  line-height: 20px;
+  width: 240px;
+  height: 100vh;
+  border-right: 1px solid var(--basic-gray-2,red);
+  word-spacing: -1px;
+  font-size: 14px;
+  letter-spacing: 0.33px;
+  display: flex;
+  color: var(--basic-gray-7);
 }
\ No newline at end of file
diff --git a/src/suitkin/components/sidebar.cljc b/src/suitkin/components/sidebar.cljc
deleted file mode 100644
index 92cc654..0000000
--- a/src/suitkin/components/sidebar.cljc
+++ /dev/null
@@ -1,87 +0,0 @@
-(ns suitkin.components.sidebar
-  (:require [stylo.core :refer [c]]
-            [suitkin.utils :as u]))
-
-(def sidebar-class
-  (c [:w "240px"]
-     [:h "100vh"]
-     {:color "var(--basic-gray-7)"
-      :font-size "14px"
-      :display "flex"
-      :flex-flow "column"
-      :letter-spacing "0.33px"
-      :word-spacing   "-1px"
-      :line-height "20px"
-      :border-right "1px solid var(--basic-gray-2,red)"}))
-
-(def sidebar-submenu
-  (c
-   [:p "4px"]
-   [:mb "16px"]
-   {:border-top "1px solid var(--basic-gray-2,red)"}))
-
-(def sidebar-aidbox-logo-class
-  (c :font-extrabold
-     :flex
-     :items-center
-     :h-auto
-     [:space-x "4px"]
-     [:py "14px"]
-     [:px "16px"]
-     {:font-size "16px" :letter-spacing "0.48px" :color "#353B50"}))
-
-(def sidebar-items
-  (c :w-full
-     [[:summary {:padding "6px 16px 6px 16px" :border-radius "4px"}
-       [:&:hover {:background-color "var(--basic-gray-0)"}]
-       [:&:active {:background-color "var(--basic-gray-1)"}]]
-      ["a.item-active"
-       {:background-color "var(--basic-gray-1)"}]
-      [:a {:padding "6px 16px 6px 16px" :border-radius "4px"}
-       [:&:hover {:background-color "var(--basic-gray-0)"}]
-       [:&:active {:background-color "var(--basic-gray-1)"}]]]))
-
-(def menu-item-class
-  (c :flex
-     :select-none
-     :cursor-pointer
-     [[:.chevron
-       {:transition ".15s transform ease"}]
-      ["details[open]"
-       [:.chevron {:transform "rotate(90deg)"}]]]))
-
-(defn menu-item
-  [item]
-  [:div {:class (c :flex :truncate)}
-   [:img {:src (u/public-src (:img item)) :class (c [:pr "8px"])}]
-   [:span (:title item)]])
-
-(defn menu-items
-  [node & [padding]]
-  (let [padding (or padding 16)]
-    [:ul {:class sidebar-items}
-     (for [item (:items node)] ^{:key (:title item)}
-       [:li {:class menu-item-class}
-        (if (:items item)
-          [:details {:class (c :w-full) :ref (fn [el] (when el #?(:cljs (new js/Accordion el))))}
-           [:summary {:class (c :flex :justify-between) :style {:padding-left (str padding "px")}}
-            [menu-item item]
-            [:img.chevron {:src (u/public-src "/suitkin/img/icon/chevron.svg")}]]
-           [:div.content
-            [menu-items item (+ padding 24)]]]
-          [:a {:class [(c :w-full) (when (:active item) "item-active")]
-               :href  (:href item)
-               :target (when (:new-tab? item) "_blank")
-               :style {:padding-left (str padding "px")}}
-           [menu-item item]])])]))
-
-(defn component
-  [properties]
-  [:aside {:class sidebar-class}
-   [:div {:class sidebar-aidbox-logo-class}
-    [:img {:src (u/public-src (:logo properties))}]
-    [:span (:brand properties)]]
-   [:div {:class (c :flex [:mx "4px"] [:mt "4px"] {:overflow-y "auto" :height "100%"})}
-    [menu-items (:menu properties)]]
-   [:div {:class sidebar-submenu}
-    [menu-items (:submenu properties)]]])
diff --git a/src/suitkin/components/sidebar/model.cljc b/src/suitkin/components/sidebar/model.cljc
new file mode 100644
index 0000000..4179b26
--- /dev/null
+++ b/src/suitkin/components/sidebar/model.cljc
@@ -0,0 +1,5 @@
+(ns suitkin.components.sidebar.model)
+
+(defn open-menu-item?
+  [item]
+  (some :active (:items item)))
diff --git a/src/suitkin/components/sidebar/styles.cljc b/src/suitkin/components/sidebar/styles.cljc
new file mode 100644
index 0000000..20876d0
--- /dev/null
+++ b/src/suitkin/components/sidebar/styles.cljc
@@ -0,0 +1,64 @@
+(ns suitkin.components.sidebar.styles
+  (:require [stylo.core :refer [c]]))
+
+
+(def root
+  (c [:w "240px"]
+     [:h "100vh"]
+     {:color "var(--basic-gray-7)"
+      :font-size "14px"
+      :display "flex"
+      :flex-flow "column"
+      :letter-spacing "0.33px"
+      :word-spacing   "-1px"
+      :line-height "20px"
+      :border-right "1px solid var(--basic-gray-2,red)"}))
+
+(def submenu
+  (c
+   [:p "4px"]
+   [:mb "16px"]
+   {:border-top "1px solid var(--basic-gray-2,red)"}))
+
+(def header
+  (c :font-extrabold
+     :flex
+     :items-center
+     :h-auto
+     [:space-x "4px"]
+     [:py "14px"]
+     [:px "16px"]
+     {:font-size "16px" :letter-spacing "0.48px" :color "#353B50"}))
+
+(def content-items
+  (c :w-full
+     [[:details
+       {:width "100%"}]
+      [:a
+       {:width "100%"}]
+      [:summary
+       [:&:hover {:background-color "var(--basic-gray-0)"}]
+       [:&:active {:background-color "var(--basic-gray-1)"}]]
+      ["a.item-active"
+       {:background-color "var(--basic-gray-1)"}]
+      [:a
+       [:&:hover {:background-color "var(--basic-gray-0)"}]
+       [:&:active {:background-color "var(--basic-gray-1)"}]]]))
+
+(def menu-item
+  (c :flex :truncate :justify-between
+     {:padding "6px 16px 6px 16px"
+      :border-radius "4px"}
+     [[:img {:display "inline-block"}]]))
+
+(def content-item
+  (c :flex
+     :select-none
+     :cursor-pointer
+     [[:.chevron
+       {:transition ".15s transform ease"}]
+      ["details[open]"
+       [:.chevron {:transform "rotate(90deg)"}]]]))
+
+(def content
+  (c :flex [:mx "4px"] [:mt "4px"] {:overflow-y "auto" :height "100%"}))
diff --git a/src/suitkin/components/sidebar/view.cljc b/src/suitkin/components/sidebar/view.cljc
new file mode 100644
index 0000000..c4ee52e
--- /dev/null
+++ b/src/suitkin/components/sidebar/view.cljc
@@ -0,0 +1,42 @@
+(ns suitkin.components.sidebar.view
+  (:require
+   [suitkin.components.sidebar.model  :as m]
+   [suitkin.components.sidebar.styles :as s]
+   [stylo.core :refer [c]]
+   [suitkin.utils                     :as u]))
+
+(defn details-animation
+  [element]
+  (when element
+    #?(:cljs (new js/Accordion element))))
+
+(defn menu-item
+  [item & [padding]]
+  [:div {:class s/menu-item :style {:padding-left (str padding "px")}}
+   [:div
+    [:img {:src (u/public-src (:img item)) :class (c [:pr "8px"])}]
+    [:span (:title item)]]
+   (when (:items item)
+     [:img.chevron {:src (u/public-src "/suitkin/img/icon/chevron.svg")}])])
+
+(defn menu-items
+  [node & [padding]]
+  (let [padding (or padding 16)]
+    [:ul {:class s/content-items}
+     (for [item (:items node)]
+       [:li {:class s/content-item :key (:title item)}
+        (if (:items item)
+          [:details {:ref details-animation :open (m/open-menu-item? item)}
+           [:summary [menu-item item padding]]
+           [:div.content [menu-items item (+ padding 24)]]]
+          [:a {:class [(when (:active item) "item-active")]
+               :href  (:href item)
+               :target (when (:new-tab? item) "_blank")}
+           [menu-item item padding]])])]))
+
+(defn component
+  [properties]
+  [:aside {:class s/root}
+   [:div {:class s/header} (:logo properties) (:brand properties)]
+   [:div {:class s/content} [menu-items (:menu properties)]]
+   [:div {:class s/submenu} [menu-items (:submenu properties)]]])
diff --git a/src/suitkin/core.cljc b/src/suitkin/core.cljc
index 4db4fb8..111c301 100644
--- a/src/suitkin/core.cljc
+++ b/src/suitkin/core.cljc
@@ -1,7 +1,7 @@
 (ns suitkin.core
   (:require
    [suitkin.components.button]
-   [suitkin.components.sidebar]))
+   [suitkin.components.sidebar.view]))
 
 (def button  #'suitkin.components.button/component)
-(def sidebar #'suitkin.components.sidebar/component)
+(def sidebar #'suitkin.components.sidebar.view/component)
diff --git a/src/ui/buttons.cljs b/src/ui/buttons.cljs
index 3035312..e060036 100644
--- a/src/ui/buttons.cljs
+++ b/src/ui/buttons.cljs
@@ -11,7 +11,7 @@
 (defscene button-primary-default
   :title "Component"
   :collection :buttons
-  :params (ra/atom {:use "primary" :theme "default" :icon "/suitkin/image/icons/plus.svg" :title "Execute"})
+  :params (ra/atom {:use "primary" :theme "default" :icon "/suitkin/img/icon/plus.svg" :title "Execute"})
   [p portfolio-opts]
   [:div
    [suitkin.core/button @p (:title @p)]
diff --git a/src/ui/navigation.cljc b/src/ui/navigation.cljc
index ccb39f3..56a69b3 100644
--- a/src/ui/navigation.cljc
+++ b/src/ui/navigation.cljc
@@ -14,7 +14,7 @@
   []
   [:div {:class (c {:height "100%"})}
    [suitkin.core/sidebar
-    {:logo  "/suitkin/img/icon/aidbox-logo-gray.svg"
+    {:logo  [:img {:src (u/public-src "/suitkin/img/icon/aidbox-logo-gray.svg")}]
      :brand [:img {:src (u/public-src "/suitkin/img/icon/aidbox-name.svg")}]
      :submenu
      {:items