diff --git a/deps/shui/shui-graph/pages/contents.md b/deps/shui/shui-graph/pages/contents.md
index 6d916f07b0..fd7335580e 100644
--- a/deps/shui/shui-graph/pages/contents.md
+++ b/deps/shui/shui-graph/pages/contents.md
@@ -1,5 +1,5 @@
 - [[About Shui]]
-- [[shui/components]]
+- [[shui/components]] if there was text here
 	- beta
 		- [[shui/components/table]]
 	- up next
@@ -15,6 +15,182 @@
 		- [[shui/components/right-sidebar]]
 		- [[shui/components/modal]]
 		- [[shui/components/properties]]
+		- [[shui/components/code]]
+		  collapsed:: true
+			- ```css
+			  :root {
+			    --lx-blue-1: #123456;
+			  }
+			  ```
+			- ```clojurescript
+			  (js/document.style.setProperty "--lx-blue-1" ""#abcdef")
+			  ```
+			- ```python
+			  # This is a single-line comment
+			  """
+			  This is a 
+			  multi-line comment (docstring)
+			  """
+			  
+			  # Import statement
+			  import math
+			  
+			  # Constant
+			  CONSTANT = 3.14159
+			  
+			  # Function definition, decorators and function call
+			  @staticmethod
+			  def add_numbers(x, y):
+			      """This function adds two numbers"""
+			      return x + y
+			  
+			  result = add_numbers(5, 7)
+			  
+			  # Built-in functions
+			  print(f"Sum is: {result}")
+			  
+			  # Class definition and object creation
+			  class MyClass:
+			      # Class variable
+			      class_var = "I'm a class variable"
+			  
+			      def __init__(self, instance_var):
+			          # Instance variable
+			          self.instance_var = instance_var
+			  
+			      def method(self):
+			          return self.instance_var
+			  
+			  # Creating object of the class
+			  obj = MyClass("I'm an instance variable")
+			  print(obj.method())
+			  
+			  # Control flow - if, elif, else
+			  num = 10
+			  if num > 0:
+			      print("Positive number")
+			  elif num == 0:
+			      print("Zero")
+			  else:
+			      print("Negative number")
+			  
+			  # For loop and range function
+			  for i in range(5):
+			      print(i)
+			  
+			  # List comprehension
+			  squares = [x**2 for x in range(10)]
+			  
+			  # Generator expression
+			  gen = (x**2 for x in range(10))
+			  
+			  # While loop
+			  count = 0
+			  while count < 5:
+			      print(count)
+			      count += 1
+			  
+			  # Exception handling
+			  try:
+			      # Division by zero
+			      x = 1 / 0
+			  except ZeroDivisionError as e:
+			      print("Handling run-time error:", e)
+			  
+			  # Lambda function
+			  double = lambda x: x * 2
+			  print(double(5))
+			  
+			  # File I/O
+			  with open('test.txt', 'r') as file:
+			      content = file.read()
+			  
+			  # Assert
+			  assert num > 0, "Number is not positive"
+			  
+			  ```
+			- ```clojure
+			  ;; This is a comment
+			  
+			  ;; Numbers
+			  42
+			  2.71828
+			  
+			  ;; Strings
+			  "Hello, world!"
+			  
+			  ;; Characters
+			  \a
+			  
+			  ;; Booleans
+			  true
+			  false
+			  
+			  ;; Lists
+			  '(1 2 3 4 5)
+			  
+			  ;; Vectors
+			  [1 2 3 4 5]
+			  
+			  ;; Maps
+			  {:name "John Doe" :age 30 :email "john.doe@example.com"}
+			  
+			  ;; Sets
+			  #{1 2 3 4 5}
+			  
+			  ;; Functions
+			  (defn add-numbers [x y]
+			    "This function adds two numbers."
+			    (+ x y))
+			  
+			  (def result (add-numbers 5 7))
+			  (println "Sum is: " result)
+			  
+			  ;; Anonymous function
+			  (#(+ %1 %2) 5 7)
+			  
+			  ;; Conditionals
+			  (if (> result 0)
+			    (println "Positive number")
+			    (println "Zero or negative number"))
+			  
+			  ;; Loops
+			  (loop [x 0]
+			    (when (< x 5)
+			      (println x)
+			      (recur (+ x 1))))
+			  
+			  ;; For
+			  (for [x (range 5)] (println x))
+			  
+			  ;; Map over a list
+			  (map inc '(1 2 3))
+			  
+			  ;; Exception handling
+			  (try 
+			    (/ 1 0)
+			    (catch ArithmeticException e 
+			      (println "Caught an exception: " (.getMessage e))))
+			  
+			  ;; Macros
+			  (defmacro unless [pred a b]
+			    `(if (not ~pred) ~a ~b))
+			  
+			  (unless true
+			    (println "This will not print")
+			    (println "This will print"))
+			  
+			  ;; Keywords
+			  :foo
+			  :bar/baz
+			  
+			  
+			  ```
+			- ```css
+			  .example {
+			    something: "#abc123"
+			  }
+			  ```
 - [[shui/colors]]
 	- We want to switch to radix varaibles
 	- We want to make it easy to customize with themes
@@ -25,15 +201,8 @@
 		  collapsed:: true
 			- var(--lx-color-6)))
 	- light and dark variants
-	- ```css
-	  :root {
-	    --lx-blue-1: #123456;
-	  }
-	  ```
-	- ```
-	  (js/document.style.setProperty "--lx-blue-1" ""#abcdef")
-	  ```
-	-
 - [[shui/inline]]
 	-
+- /
+-
 -
\ No newline at end of file
diff --git a/deps/shui/shui-graph/pages/shui___components___toggle.md b/deps/shui/shui-graph/pages/shui___components___toggle.md
new file mode 100644
index 0000000000..3cf20d57b0
--- /dev/null
+++ b/deps/shui/shui-graph/pages/shui___components___toggle.md
@@ -0,0 +1 @@
+-
\ No newline at end of file
diff --git a/deps/shui/src/logseq/shui/button/v2.cljs b/deps/shui/src/logseq/shui/button/v2.cljs
new file mode 100644
index 0000000000..07e19ed38a
--- /dev/null
+++ b/deps/shui/src/logseq/shui/button/v2.cljs
@@ -0,0 +1,12 @@
+(ns logseq.shui.button.v2
+  (:require 
+    [clojure.string :as str]
+    [logseq.shui.util :as util]
+    [rum.core :as rum]))
+
+(rum/defc root 
+  [{:keys [intent text] :or {intent :primary}} context]
+  [:button.shui__button 
+   [:div.shui__border] 
+   text])
+   
diff --git a/deps/shui/src/logseq/shui/cmdk/v2.cljs b/deps/shui/src/logseq/shui/cmdk/v2.cljs
new file mode 100644
index 0000000000..0a949a29ef
--- /dev/null
+++ b/deps/shui/src/logseq/shui/cmdk/v2.cljs
@@ -0,0 +1,13 @@
+(ns logseq.shui.cmdk.v2
+  (:require 
+    [clojure.string :as str]
+    [logseq.shui.util :as util]
+    [rum.core :as rum]))
+
+(rum/defc root 
+  [{:keys [intent text] :or {intent :primary}} context]
+  [:button.shui__button 
+   [:div.shui__border] 
+   text])
+   
+
diff --git a/deps/shui/src/logseq/shui/context.cljs b/deps/shui/src/logseq/shui/context.cljs
index e0ea8a2c13..5c50e41511 100644
--- a/deps/shui/src/logseq/shui/context.cljs
+++ b/deps/shui/src/logseq/shui/context.cljs
@@ -40,4 +40,6 @@
    ;; We need some variable from the state to carry over 
    :color-accent (state/get-color-accent) 
    :color-gradient (state/get-color-gradient)
+   :sub-color-gradient-bg-styles state/sub-color-gradient-bg-styles 
+   :sub-color-gradient-text-styles state/sub-color-gradient-text-styles
    :linear-gradient colors/linear-gradient})
diff --git a/deps/shui/src/logseq/shui/core.cljs b/deps/shui/src/logseq/shui/core.cljs
index 245d1e2373..6b274fa30a 100644
--- a/deps/shui/src/logseq/shui/core.cljs
+++ b/deps/shui/src/logseq/shui/core.cljs
@@ -1,11 +1,21 @@
 (ns logseq.shui.core
   (:require 
-    [logseq.shui.table.v2 :as shui.table.v2]
-    [logseq.shui.context :as shui.context]))
+    [logseq.shui.button.v2 :as shui.button.v2]
+    [logseq.shui.cmdk.v2 :as shui.cmdk.v2]
+    [logseq.shui.context :as shui.context]
+    [logseq.shui.table.v2 :as shui.table.v2]))
 
 ;; table component
 (def table shui.table.v2/root)
 (def table-v2 shui.table.v2/root)
 
+;; button component 
+(def button shui.button.v2/root)
+(def button-v2 shui.button.v2/root)
+
+;; cmdk 
+(def cmdk shui.cmdk.v2/root)
+(def cmdk-v2 shui.cmdk.v2/root)
+
 ;; context
 (def make-context shui.context/make-context)
diff --git a/resources/css/codemirror.lsradix.css b/resources/css/codemirror.lsradix.css
index 3c39b7f81e..c2dbf75f9d 100644
--- a/resources/css/codemirror.lsradix.css
+++ b/resources/css/codemirror.lsradix.css
@@ -47,8 +47,8 @@ http://ethanschoonover.com/lsradix/img/lsradix-palette.png
 
 .cm-s-lsradix.cm-s-light {
   /* background-color: or(--lx-gray-12, #fdf6e3); */
-  background-color: or(--lx-gray-11, #fdf6e3);
-  color: or(--lx-gray-01, #657b83);
+  background-color: or(--lx-gray-02, #fdf6e3);
+  color: or(--lx-gray-10, #657b83);
   text-shadow: #eee8d5 0 1px;
 }
 
@@ -65,14 +65,14 @@ http://ethanschoonover.com/lsradix/img/lsradix-palette.png
 .cm-s-lsradix .cm-def { color: or(--rx-sky-11, #2aa198); }
 
 /* .cm-s-lsradix .cm-variable { color: or(--lx-gray-09, #839496); } */
-.cm-s-lsradix .cm-variable { color: or(--lx-gray-10, #839496); }
+.cm-s-lsradix .cm-variable { color: or(--lx-gray-12, #839496); }
 .cm-s-lsradix .cm-variable-2 { color: or(--rx-yellow-11, #b58900); }
 .cm-s-lsradix .cm-variable-3, .cm-s-lsradix .cm-type { color: or(--rx-purple-11, #6c71c4); }
 
 .cm-s-lsradix .cm-property { color: or(--rx-sky-11, #2aa198); }
 .cm-s-lsradix .cm-operator { color: or(--rx-purple-11, #6c71c4); }
 
-.cm-s-lsradix .cm-comment { color: or(--lx-gray-03, #586e75); font-style:italic; }
+.cm-s-lsradix .cm-comment { color: or(--lx-gray-10, #586e75); font-style:italic; }
 
 .cm-s-lsradix .cm-string { color: or(--rx-grass-11, #859900); }
 .cm-s-lsradix .cm-string-2 { color: or(--rx-yellow-11, #b58900); }
@@ -104,13 +104,13 @@ http://ethanschoonover.com/lsradix/img/lsradix-palette.png
   border-bottom: 1px dotted or(--rx-red-11, #dc322f);
 }
 
-.cm-s-lsradix.cm-s-dark div.CodeMirror-selected { background: or(--lx-gray-02, #073642); }
-.cm-s-lsradix.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }
-.cm-s-lsradix.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); }
+.cm-s-lsradix.cm-s-dark div.CodeMirror-selected { background: or(--lx-gray-06, #073642); }
+.cm-s-lsradix.cm-s-dark.CodeMirror ::selection { background: or(--lx-gray-06, rgba(7, 54, 66, 0.99)); }
+.cm-s-lsradix.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: or(--lx-gray-06, rgba(7, 54, 66, 0.99)); }
 
-.cm-s-lsradix.cm-s-light div.CodeMirror-selected { background: or(--lx-gray-11, #eee8d5); }
-.cm-s-lsradix.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: or(--lx-gray-11, #eee8d5); }
-.cm-s-lsradix.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-light .CodeMirror-line > span::-moz-selection, .cm-s-light .CodeMirror-line > span > span::-moz-selection { background: or(--lx-gray-11, #eee8d5); }
+.cm-s-lsradix.cm-s-light div.CodeMirror-selected { background: or(--lx-gray-06, #eee8d5); }
+.cm-s-lsradix.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: or(--lx-gray-06, #eee8d5); }
+.cm-s-lsradix.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-light .CodeMirror-line > span::-moz-selection, .cm-s-light .CodeMirror-line > span > span::-moz-selection { background: or(--lx-gray-06, #eee8d5); }
 
 /* Editor styling */
 
@@ -135,7 +135,7 @@ http://ethanschoonover.com/lsradix/img/lsradix-palette.png
 
 /* Light */
 .cm-s-lsradix.cm-s-light .CodeMirror-gutters {
-  background-color: or(--lx-gray-02, #eee8d5);
+  background-color: or(--lx-gray-03, #eee8d5);
   /* background-color: or(--lx-gray-11, #eee8d5); */
 }
 
diff --git a/resources/css/shui.css b/resources/css/shui.css
new file mode 100644
index 0000000000..76bced7248
--- /dev/null
+++ b/resources/css/shui.css
@@ -0,0 +1,41 @@
+.shui__button {
+  @apply bg-gradient-to-br from-red-500 via-green-500 to-blue-500 py-0.5 px-2 rounded-lg text-sm font-medium relative;
+  /* box-shadow: inset 0 2px 0 0px rgba(255, 255, 255, 0.2), */ 
+  /*             inset 0 -2px 0 0px rgba(0, 0, 0, 0.1); */
+  /* background-image: linear-gradient(white, white), */
+  /*                   linear-gradient(to bottom, green, gold); */
+  /* background-origin: border-box; */
+  /* background-clip: content-box, border-box; */
+}
+
+.shui__button:before {
+  @apply absolute inset-0 rounded-lg;
+  content: "";
+  padding: 1px;
+  background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box,
+                linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  /* background-image: linear-gradient(to bottom, white, transparent); */
+  /* background-clip: border-box, padding-box; */
+  /* padding: 1px; */
+  /* border: 1px solid transparent; */
+  /* border: 1px solid; */
+  /* border-image: linear-gradient(to bottom, black, transparent) 1; */ 
+}
+
+.shui__button:after {
+  @apply absolute inset-0 rounded-lg;
+  content: "";
+  padding: 1px;
+  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box,
+                linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  /* @apply absolute inset-0 rounded-lg; */
+  /* content: ""; */
+  /* border: 1px solid; */
+  /* border-image: linear-gradient(to top, white, transparent) 1; */ 
+}
diff --git a/src/main/frontend/colors.cljs b/src/main/frontend/colors.cljs
index c05d66ce5e..a9ba13b662 100644
--- a/src/main/frontend/colors.cljs
+++ b/src/main/frontend/colors.cljs
@@ -1509,8 +1509,6 @@
         end (+ middle (/ (dec n-stops) 2))]
     (subvec (into color-list color-list) start end)))
 
-
-(mod -1 10)
 (defn linear-gradient [color-name color-stop gradient-level]
   (let [color-index (.indexOf color-list color-name) 
         step (fn [dist] 
@@ -1524,7 +1522,8 @@
       4 (str "linear-gradient(-45deg, " (step -2) " -16.66%, " (step -1) " 16.66%, " (step 0) " 50%, " (step 1) " 83.33%, " (step 2) " 116.66%)") 
       5 (str "linear-gradient(-45deg, " (step -2) " 0%, " (step -1) " 25%, " (step 0) " 50%, " (step 1) " 75%, " (step 2) " 100%)")
       6 (str "linear-gradient(-45deg, " (step -3) " -10%, " (step -2) " 10%, " (step -1) " 30%, " (step 0) " 50%, " (step 1) " 70%, " (step 2) " 90%, " (step 3) " 110%)")
-      7 (str "linear-gradient(-45deg, " (step -3) " 0%, " (step -2) " 16.66%, " (step -1) " 33.33%, " (step 0) " 50%, " (step 1) " 66.66%, " (step 2) " 83.33%, " (step 3) " 100%)"))))
+      7 (str "linear-gradient(-45deg, " (step -3) " 0%, " (step -2) " 16.66%, " (step -1) " 33.33%, " (step 0) " 50%, " (step 1) " 66.66%, " (step 2) " 83.33%, " (step 3) " 100%)")
+      (str "linear-gradient(90deg, " (step 0) ", " (step 0) ")"))))
 
 (defn get-color
   ; ([value])
@@ -1560,15 +1559,16 @@
                           "--ls-border-color: var(--rx-" (name gray) "-05); "
                           "--ls-secondary-border-color: var(--rx-" (name color) "-05); "
                           "--ls-page-checkbox-color: var(--rx-" (name gray) "-07); "
-                          "--ls-selection-background-color: var(--rx-" (name color) "-09); "
+                          "--ls-selection-background-color: var(--rx-" (name gray) "-04-alpha); "
+                          "--ls-block-highlight-color: var(--rx-" (name gray) "-04-alpha); "
                           "--ls-focus-ring-color: var(--rx-" (name color) "-09); "
                           "--ls-table-tr-even-background-color: var(--rx-" (name gray) "-04); "
                           "--ls-page-properties-background-color: var(--rx-" (name gray) "-04); "
-                          "--ls-block-highlight-color: var(--rx-" (name gray) "-04); "
                           "--ls-cloze-text-color: var(--rx-" (name color) "-08); "
                           "--ls-wb-stroke-color-default: var(--rx-" (name color) "-07); " 
                           "--ls-wb-background-color-default: var(--rx-" (name color) "-04); "
-                          "--ls-wb-text-color-default: var(--rx-" (name gray) "-12); ")
+                          "--ls-wb-text-color-default: var(--rx-" (name gray) "-12); "
+                          "--ls-a-chosen-bg: var(--rx-" (name gray) "-01); ")
                           ; "--tl-selectStroke: var(--rx-" (name color) "-08); ")
         tl-translations (str "[class^=\"tl-\"] { --tl-selectStroke: var(--rx-" (name color) "-09); }")]
     (set! (.-id style-tag) "color-variables")
diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs
index d37aa2be10..e094790b5a 100644
--- a/src/main/frontend/components/block.cljs
+++ b/src/main/frontend/components/block.cljs
@@ -10,6 +10,7 @@
             [clojure.walk :as walk]
             [datascript.core :as d]
             [dommy.core :as dom]
+            [frontend.colors :as colors]
             [frontend.commands :as commands]
             [frontend.components.block.macros :as block-macros]
             [frontend.components.datetime :as datetime-comp]
@@ -529,7 +530,7 @@
              (state/get-left-sidebar-open?))
     (ui-handler/close-left-sidebar!)))
 
-(rum/defcs page-inner <
+(rum/defcs page-inner < rum/reactive
   (rum/local false ::mouse-down?)
   "The inner div of page reference component
 
@@ -540,13 +541,15 @@
   (let [*mouse-down? (::mouse-down? state)
         tag? (:tag? config)
         config (assoc config :whiteboard-page? whiteboard-page?)
-        untitled? (model/untitled-page? page-name)]
+        untitled? (model/untitled-page? page-name)
+        gradient-styles (state/sub-color-gradient-text-styles :09)]
     [:a
      {:tabIndex "0"
       :class (cond-> (if tag? "tag" "page-ref")
                (:property? config)
                (str " page-property-key block-property")
                untitled? (str " opacity-50"))
+      :style gradient-styles
       :data-ref page-name
       :draggable true
       :on-drag-start (fn [e] (editor-handler/block->data-transfer! page-name-in-block e))
@@ -754,7 +757,11 @@
                               (.stopPropagation e))}
        (excalidraw s block-uuid)]
       [:span.page-reference
-       {:data-ref s}
+       {:data-ref s
+        :style {:background-image (colors/linear-gradient :grass "09" 5)
+                :background-clip "text"
+                "-webkit-background-clip" "text"
+                :color "transparent"}}
        (when (and (or show-brackets? nested-link?)
                   (not html-export?)
                   (not contents-page?))
@@ -3084,12 +3091,7 @@
           attr (when language
                  {:data-lang language})
           code (apply str lines)
-          theme-key (str (state/sub :ui/theme) "/" 
-                         (state/sub :ui/system-theme?) "/" 
-                         (state/sub :ui/radix-color) "/" 
-                         (state/sub :ui/custom-theme))
           [inside-portal? set-inside-portal?] (rum/use-state nil)]
-      (js/console.log "actual theme-key" theme-key)
       (cond
         html-export?
         (highlight/html-export attr code)
@@ -3110,7 +3112,7 @@
 
              :else
              [:<>
-              (lazy-editor/editor config (str (d/squuid)) attr code (assoc options :theme-key theme-key))
+              (lazy-editor/editor config (str (d/squuid)) attr code options)
               (let [options (:options options) block (:block config)]
                 (when (and (= language "clojure") (contains? (set options) ":results"))
                   (sci/eval-result code block)))])])))))
diff --git a/src/main/frontend/components/command_palette.css b/src/main/frontend/components/command_palette.css
index 8528252386..5ed8900592 100644
--- a/src/main/frontend/components/command_palette.css
+++ b/src/main/frontend/components/command_palette.css
@@ -40,10 +40,15 @@
 
       &.chosen,
       &.chosen p {
-        background-color: var(--ls-a-chosen-bg);
+        background-color: or(--logseq-og-cp-chosen, --lx-gray-03, --ls-a-chosen-bg);
         color: var(--ls-secondary-text-color);
       }
 
+      .dark &.chosen,
+      .dark &.chosen p {
+        background-color: or(--logseq-og-cp-chosen, --lx-gray-02, --ls-a-chosen-bg);
+      }
+
       &:hover p {
         color: var(--ls-secondary-text-color);
       }
diff --git a/src/main/frontend/components/container.cljs b/src/main/frontend/components/container.cljs
index 126e7d8d2b..f0c6d715a2 100644
--- a/src/main/frontend/components/container.cljs
+++ b/src/main/frontend/components/container.cljs
@@ -787,7 +787,6 @@
                         :route-match    route-match
                         :default-home   default-home
                         :new-block-mode new-block-mode})
-
         (when (util/electron?)
           (find-in-page/search))
 
@@ -823,4 +822,4 @@
       (when
        (and (not config/mobile?)
             (not config/publishing?))
-        (help-button))])))
+       (help-button))])))
diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs
index a0ee7a1b90..dac3943e4e 100644
--- a/src/main/frontend/components/settings.cljs
+++ b/src/main/frontend/components/settings.cljs
@@ -1,6 +1,8 @@
 (ns frontend.components.settings
   (:require [clojure.string :as string]
             [electron.ipc :as ipc]
+            [logseq.shui.core :as shui]
+            [frontend.shui :refer [make-shui-context]]
             [frontend.colors :as colors]
             [frontend.components.assets :as assets]
             [frontend.components.conversion :as conversion-component]
@@ -148,7 +150,7 @@
            :height 500}]]])
 
 (defn row-with-button-action
-  [{:keys [left-label action button-label href on-click desc -for]}]
+  [{:keys [left-label action button-label href on-click desc -for stretch]}]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
 
    ;; left column
@@ -158,12 +160,17 @@
 
    ;; right column
    [:div.mt-1.sm:mt-0.sm:col-span-2.flex.items-center
-    {:style {:gap "0.5rem"}}
-    [:div (if action action (ui/button
-                              button-label
-                              :class    "text-sm p-1"
-                              :href     href
-                              :on-click on-click))]
+    {:style {:display "flex" :gap "0.5rem" :align-items "center"}}
+    [:div {:style (when stretch {:width "100%"})} 
+     (if action action (shui/button {:text button-label
+                                     :href href 
+                                     :on-click on-click}
+                                    (make-shui-context nil nil)))]
+     ; (if action action (ui/button
+     ;                      button-label
+     ;                      :class    "text-sm p-1"
+     ;                      :href     href
+     ;                      :on-click on-click))]
     (when-not (or (util/mobile?)
                   (mobile-util/native-platform?))
       [:div.text-sm.flex desc])]])
diff --git a/src/main/frontend/extensions/code.cljs b/src/main/frontend/extensions/code.cljs
index 4ecf21a2d7..99c823ae03 100644
--- a/src/main/frontend/extensions/code.cljs
+++ b/src/main/frontend/extensions/code.cljs
@@ -415,12 +415,8 @@
                           (when config-edit?
                             {:hintOptions {}})
                           user-options)
-        theme-mode (state/sub :ui/theme)
-        system-theme-mode (state/sub :ui/system-theme)
         editor (when textarea
-                 (from-textarea textarea (clj->js cm-options)))
-        element-key (str "editor-" id "-" radix-color "-" theme-mode "-" system-theme-mode "-" theme)]
-    (js/console.log "element-key: " element-key theme)
+                 (from-textarea textarea (clj->js cm-options)))]
     (when editor
       (let [textarea-ref (rum/ref-node state textarea-ref-name)
             element (.getWrapperElement editor)]
diff --git a/src/main/frontend/handler/events.cljs b/src/main/frontend/handler/events.cljs
index ea0cac3116..07f2d8c27d 100644
--- a/src/main/frontend/handler/events.cljs
+++ b/src/main/frontend/handler/events.cljs
@@ -69,6 +69,7 @@
             [goog.dom :as gdom]
             [logseq.db.schema :as db-schema]
             [logseq.graph-parser.config :as gp-config]
+            [logseq.shui.core :refer [cmdk]]
             [promesa.core :as p]
             [rum.core :as rum]))
 
@@ -269,17 +270,17 @@
   (when
    (and (not (util/electron?))
         (not (mobile-util/native-platform?)))
-    (fn [close-fn]
-      [:div
-       [:p
-        "Grant native filesystem permission for directory: "
-        [:b (config/get-local-dir repo)]]
-       (ui/button
-        "Grant"
-        :class "ui__modal-enter"
-        :on-click (fn []
-                    (nfs/check-directory-permission! repo)
-                    (close-fn)))])))
+   (fn [close-fn]
+     [:div
+      [:p
+       "Grant native filesystem permission for directory: "
+       [:b (config/get-local-dir repo)]]
+      (ui/button
+       "Grant"
+       :class "ui__modal-enter"
+       :on-click (fn []
+                   (nfs/check-directory-permission! repo)
+                   (close-fn)))])))
 
 (defmethod handle :modal/nfs-ask-permission []
   (when-let [repo (get-local-repo)]
@@ -383,7 +384,7 @@
   ;; FIXME: an ugly implementation for redirecting to page on new window is restored
   (repo-handler/graph-ready! repo)
   ;; Replace initial fs watcher
-  (fs-watcher/load-graph-files! repo)
+  (fs-watcher/load-graph-files! repo))
   ;; TODO(junyi): Notify user to update filename format when the UX is smooth enough
   ;; (when-not config/test?
   ;;   (js/setTimeout
@@ -395,7 +396,7 @@
   ;;                   (not= filename-format :triple-lowbar))
   ;;          (state/pub-event! [:ui/notify-outdated-filename-format []]))))
   ;;    3000))
-  )
+  
 
 (defmethod handle :notification/show [[_ {:keys [content status clear?]}]]
   (notification/show! content status clear?))
@@ -410,6 +411,13 @@
                      :close-btn?  false
                      :label "ls-modal-search"}))
 
+(defmethod handle :go/cmdk [_]
+  (js/alert "handle cmdk")
+  (state/set-modal! cmdk 
+                    {:fullscreen? false 
+                     :close-btn?  false 
+                     :label "ls-modal-cmdk"}))
+
 (defmethod handle :go/plugins [_]
   (plugin/open-plugins-modal!))
 
@@ -990,5 +998,5 @@
   (def deprecated-repo (state/get-current-repo))
   (def new-repo (string/replace deprecated-repo deprecated-app-id current-app-id))
 
-  (update-file-path deprecated-repo new-repo deprecated-app-id current-app-id)
-  )
+  (update-file-path deprecated-repo new-repo deprecated-app-id current-app-id))
+  
diff --git a/src/main/frontend/handler/route.cljs b/src/main/frontend/handler/route.cljs
index 7659fc1785..a63f38b253 100644
--- a/src/main/frontend/handler/route.cljs
+++ b/src/main/frontend/handler/route.cljs
@@ -192,6 +192,9 @@
     (state/set-search-mode! search-mode))
   (state/pub-event! [:go/search]))
 
+(defn go-to-cmdk! []
+  (state/pub-event! [:go/cmdk]))
+
 (defn sidebar-journals!
   []
   (state/sidebar-add-block!
diff --git a/src/main/frontend/modules/shortcut/config.cljs b/src/main/frontend/modules/shortcut/config.cljs
index 55ac3ea920..dbf7d7c6be 100644
--- a/src/main/frontend/modules/shortcut/config.cljs
+++ b/src/main/frontend/modules/shortcut/config.cljs
@@ -349,6 +349,11 @@
                                                 (editor-handler/escape-editing false)
                                                 (route-handler/go-to-search! :global))}
 
+   :go/cmdk                        {:binding "mod+j"
+                                    :fn      #(do 
+                                                (editor-handler/escape-editing false)
+                                                (route-handler/go-to-cmdk!))}
+
    :go/electron-find-in-page       {:binding "mod+f"
                                     :inactive (not (util/electron?))
                                     :fn      #(search-handler/open-find-in-page!)}
@@ -519,6 +524,15 @@
    :ui/toggle-cards                 {:binding "t c"
                                      :fn      ui-handler/toggle-cards!}
 
+   :ui/cycle-color-off              {:binding "c o" 
+                                     :fn      state/unset-color-accent!}
+
+   :ui/cycle-color                  {:binding "c c" 
+                                     :fn      state/cycle-color!}
+
+   :ui/cycle-gradient               {:binding "c g" 
+                                     :fn      state/cycle-gradient!}
+
    :git/commit                      {:binding "mod+g c"
                                      :inactive (not (util/electron?))
                                      :fn      commit/show-commit-modal!}
@@ -698,6 +712,7 @@
                           :ui/toggle-brackets
                           :go/search-in-page
                           :go/search
+                          :go/cmdk
                           :go/electron-find-in-page
                           :go/electron-jump-to-the-next
                           :go/electron-jump-to-the-previous
@@ -734,6 +749,9 @@
                           :ui/toggle-help
                           :ui/toggle-theme
                           :ui/toggle-contents
+                          :ui/cycle-color-off
+                          :ui/cycle-color
+                          :ui/cycle-gradient
                           :editor/open-file-in-default-app
                           :editor/open-file-in-directory
                           :editor/copy-current-file
@@ -861,7 +879,10 @@
     :ui/toggle-left-sidebar
     :ui/toggle-right-sidebar
     :ui/toggle-settings
-    :ui/toggle-contents]
+    :ui/toggle-contents
+    :ui/cycle-color-off
+    :ui/cycle-color 
+    :ui/cycle-gradient]
 
    :shortcut.category/whiteboard
    [:editor/new-whiteboard
diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs
index 96094f5254..6c877567e6 100644
--- a/src/main/frontend/state.cljs
+++ b/src/main/frontend/state.cljs
@@ -2153,3 +2153,39 @@ Similar to re-frame subscriptions"
   (swap! state assoc :ui/radix-gradient nil)
   (storage/remove :ui/radix-gradient))
 
+(defn cycle-color! []
+  (let [current-color (get-color-accent)
+        next-color (->> (cons nil colors/color-list) 
+                        (drop-while #(not= % current-color)) 
+                        (second))]
+    (if next-color 
+      (set-color-accent! next-color) 
+      (unset-color-accent!))))
+
+(defn cycle-gradient! []
+  (let [current-gradient (get-color-gradient)]
+    (case current-gradient  
+      nil (set-color-gradient! 2)
+      6 (unset-color-gradient!)
+      (set-color-gradient! (inc current-gradient)))))
+  
+
+(defn sub-color-gradient-bg-styles [step]
+  (let [color (sub :ui/radix-color)
+        stops (sub :ui/radix-gradient)]
+    {:background-image (colors/linear-gradient color step stops)
+     :background-attachment :fixed 
+     :background-position "0 0"
+     :background-size "100% 100%"}))
+     ; :transform "translate3d(0,0,0) "}))
+
+(defn sub-color-gradient-text-styles [step]
+  (assoc (sub-color-gradient-bg-styles step)
+        :background-clip "text"
+        "-webkit-background-clip" "text"
+        :color :transparent))
+  ; (sub-color-gradient-bg-styles step))
+    
+    
+  
+
diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css
index f1d102bb2c..db6e1df3ab 100644
--- a/src/main/frontend/ui.css
+++ b/src/main/frontend/ui.css
@@ -294,7 +294,7 @@ html.is-mobile {
   &:hover:not([disabled]) {
     /* opacity: or(--lx-accent-01, 0.8); */
     opacity: 1;
-    background-color: or(--lx-accent-07);
+    background-color: or(--lx-accent-06, --color-indigo-700);
   }
 
   &.is-link {
diff --git a/src/resources/dicts/en.edn b/src/resources/dicts/en.edn
index b4228530d0..19987772fb 100644
--- a/src/resources/dicts/en.edn
+++ b/src/resources/dicts/en.edn
@@ -732,6 +732,7 @@
   :go/electron-jump-to-the-next   "Jump to the next match to your Find bar search"
   :go/electron-jump-to-the-previous "Jump to the previous match to your Find bar search"
   :go/search                      "Search pages and blocks"
+  :go/cmdk                        "Open command center"
   :go/journals                    "Go to journals"
   :go/backward                    "Backwards"
   :go/forward                     "Forwards"
@@ -765,6 +766,10 @@
   :ui/toggle-help                 "Toggle help"
   :ui/toggle-theme                "Toggle between dark/light theme"
   :ui/toggle-contents             "Toggle Contents in sidebar"
+  :ui/cycle-color-off             "Cycle color off"
+  :ui/cycle-color                 "Cycle color"
+  :ui/cycle-gradient              "Cycle gradient"
+   ;;  :ui/open-new-window             "Open another window"
   :command/toggle-favorite        "Add to/remove from favorites"
   :editor/open-file-in-default-app "Open file in default app"
   :editor/open-file-in-directory   "Open file in parent directory"
diff --git a/tailwind.all.css b/tailwind.all.css
index ec6e41a4a0..c8390b7644 100644
--- a/tailwind.all.css
+++ b/tailwind.all.css
@@ -16,6 +16,7 @@
 @import "resources/css/codemirror.solarized.css";
 @import "resources/css/codemirror.lsradix.css";
 @import "resources/css/show-hint.css";
+@import "resources/css/shui.css";
 
 @import "resources/css/radix.css";
 @import "resources/css/animation.css";