diff --git a/frontend/src/app/main/ui/workspace/tokens/modals.cljs b/frontend/src/app/main/ui/workspace/tokens/modals.cljs
index 23edf75ed..30a45c49f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals.cljs
@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.main.data.modal :as modal]
+   [app.main.ui.workspace.tokens.modals.themes :as wtmt]
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.form :refer [form]]
    [okulary.core :as l]
@@ -37,7 +38,7 @@
     (-> (calculate-position vport position x y)
         (clj->js))))
 
-(mf/defc modal
+(mf/defc token-update-create-modal
   {::mf/wrap-props false}
   [{:keys [x y position token token-type] :as _args}]
   (let [wrapper-style (use-viewport-position-style x y position)]
@@ -47,82 +48,88 @@
      [:& form {:token token
                :token-type token-type}]]))
 
+(mf/defc token-themes-modal
+  {::mf/register modal/components
+   ::mf/register-as :tokens/themes}
+  [args]
+  [:& wtmt/modal args])
+
 ;; Modals ----------------------------------------------------------------------
 
 (mf/defc boolean-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/boolean}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc border-radius-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/border-radius}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc stroke-width-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/stroke-width}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc box-shadow-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/box-shadow}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc sizing-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/sizing}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc dimensions-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/dimensions}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc numeric-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/numeric}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc opacity-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/opacity}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc other-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/other}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc rotation-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/rotation}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc spacing-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/spacing}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc string-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/string}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
 
 (mf/defc typography-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/typography}
   [properties]
-  [:& modal properties])
+  [:& token-update-create-modal properties])
diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
new file mode 100644
index 000000000..8c146d370
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@@ -0,0 +1,28 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.workspace.tokens.modals.themes
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [rumext.v2 :as mf]
+   [app.main.data.modal :as modal]
+   [app.main.store :as st]
+   [app.main.ui.icons :as i]))
+
+(def ^:private close-icon
+  (i/icon-xref :close (stl/css :close-icon)))
+
+(mf/defc modal
+  {::mf/wrap-props false}
+  [{:keys [] :as _args}]
+  (let [handle-close-dialog (mf/use-callback #(st/emit! (modal/hide)))]
+    [:div {:class (stl/css :modal-overlay)}
+     [:div {:class (stl/css :modal-dialog)}
+      [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} close-icon]
+      [:div {:class (stl/css :modal-title)} "Themes"]
+
+      [:div {:class (stl/css :modal-content)}
+       "Themes"]]]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
new file mode 100644
index 000000000..475e3997a
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
@@ -0,0 +1,34 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-dialog {
+  @extend .modal-container-base;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  width: 100%;
+  max-width: $s-640;
+}
+
+.modal-title {
+  @include headlineMediumTypography;
+  margin-block-end: $s-32;
+  color: var(--modal-title-foreground-color);
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.close-btn {
+  @extend .modal-close-btn-base;
+}
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index b9e6c6a87..59019201a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -107,6 +107,7 @@
                                  (let [{:keys [key fields]} modal]
                                    (dom/stop-propagation event)
                                    (st/emit! (dt/set-token-type-section-open type true))
+                                   (js/console.log "key" key)
                                    (modal/show! key {:x (.-clientX ^js event)
                                                      :y (.-clientY ^js event)
                                                      :position :right
@@ -190,7 +191,12 @@
                      :collapsed (not @open?)
                      :all-clickable true
                      :title "THEMES"
-                     :on-collapsed #(swap! open? not)}]]
+                     :on-collapsed #(swap! open? not)}]
+      [:button {:class (stl/css :add-set)
+                :on-click (fn [event]
+                            (modal/show! :tokens/themes {:x (.-clientX ^js event)
+                                                         :y (.-clientY ^js event)}))}
+       i/add]]
      (when @open?
        [:div
         [:style