diff --git a/frontend/src/app/main/ui/workspace/tokens/modals.cljs b/frontend/src/app/main/ui/workspace/tokens/modals.cljs
index 2f23ea933b..fe7e4504b7 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.tokens.modals
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data.macros :as dm]
    [app.main.data.modal :as modal]
    [app.main.refs :as refs]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -20,30 +21,55 @@
 
 (defn calculate-position
   "Calculates the style properties for the given coordinates and position"
-  [{vh :height} position x y]
-  (let [;; picker height in pixels
-        h 510
+  [{vh :height} position x y color?]
+  (let [;; picker height in pixels 
+        ;; TODO: Revisit these harcoded values
+        h (if color? 610 510)
         ;; Checks for overflow outside the viewport height
-        overflow-fix (max 0 (+ y (- 50) h (- vh)))
-
-        x-pos 325]
+        max-y             (- vh h)
+        overflow-fix      (max 0 (+ y (- 50) h (- vh)))
+        bottom-offset     "1rem"
+        top-offset        (dm/str (- y 70) "px")
+        max-height-top    (str "calc(100vh - " top-offset)
+        max-height-bottom (str "calc(100vh -" bottom-offset)
+        x-pos 325
+        rulers?       (mf/deref refs/rulers?)
+        left-offset   (if rulers? 80 58)
+        left-position (dm/str (- x x-pos) "px")]
     (cond
-      (or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"}
-      (= position :left) {:left (str (- x x-pos) "px")
-                          :top (str (- y 50 overflow-fix) "px")}
-      :else {:left (str (+ x 80) "px")
-             :top (str (- y 70 overflow-fix) "px")})))
+      (or (nil? x) (nil? y))
+      {:left "auto" :right "16rem" :top "4rem"}
 
-(defn use-viewport-position-style [x y position]
+      (= position :left)
+      (if (> y max-y)
+        {:left left-position
+         :bottom bottom-offset
+         :maxHeight max-height-bottom}
+
+        {:left left-position
+         :maxHeight max-height-top
+         :top (dm/str (- y 50 overflow-fix) "px")})
+
+      :else
+      (if (> y max-y)
+        {:left (dm/str (+ x left-offset) "px")
+         :bottom bottom-offset
+         :maxHeight max-height-bottom}
+
+        {:left (dm/str (+ x left-offset) "px")
+         :top (dm/str (- y 70 overflow-fix) "px")
+         :maxHeight max-height-top}))))
+
+(defn use-viewport-position-style [x y position color?]
   (let [vport (-> (l/derived :vport refs/workspace-local)
                   (mf/deref))]
-    (-> (calculate-position vport position x y)
+    (-> (calculate-position vport position x y color?)
         (clj->js))))
 
 (mf/defc token-update-create-modal
   {::mf/wrap-props false}
   [{:keys [x y position token token-type action selected-token-set-name] :as _args}]
-  (let [wrapper-style (use-viewport-position-style x y position)
+  (let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
         modal-size-large* (mf/use-state false)
         modal-size-large? (deref modal-size-large*)
         close-modal (mf/use-fn