diff --git a/common/app/common/pages.cljc b/common/app/common/pages.cljc
index b0229d42ec..f9b0c8e5cd 100644
--- a/common/app/common/pages.cljc
+++ b/common/app/common/pages.cljc
@@ -56,31 +56,34 @@
     (<= % max-safe-int)))
 
 
-(s/def :internal.page.gradient.stop/color ::string)
-(s/def :internal.page.gradient.stop/opacity ::safe-number)
-(s/def :internal.page.gradient.stop/offset ::safe-number)
 
-(s/def :internal.page.gradient/start-x ::safe-number)
-(s/def :internal.page.gradient/start-y ::safe-number)
-(s/def :internal.page.gradient/end-x ::safe-number)
-(s/def :internal.page.gradient/end-y ::safe-number)
-(s/def :internal.page.gradient/width ::safe-number)
+(s/def :internal.gradient.stop/color ::string)
+(s/def :internal.gradient.stop/opacity ::safe-number)
+(s/def :internal.gradient.stop/offset ::safe-number)
 
-(s/def :internal.page.gradient/stop
-  (s/keys :req-un [:internal.page.gradient.stop/color
-                   :internal.page.gradient.stop/opacity
-                   :internal.page.gradient.stop/offset]))
+(s/def :internal.gradient/type #{:linear :radial})
+(s/def :internal.gradient/start-x ::safe-number)
+(s/def :internal.gradient/start-y ::safe-number)
+(s/def :internal.gradient/end-x ::safe-number)
+(s/def :internal.gradient/end-y ::safe-number)
+(s/def :internal.gradient/width ::safe-number)
 
-(s/def :internal.page.gradient/stops
-  (s/map-of ::safe-number :internal.page.gradient/stop))
+(s/def :internal.gradient/stop
+  (s/keys :req-un [:internal.gradient.stop/color
+                   :internal.gradient.stop/opacity
+                   :internal.gradient.stop/offset]))
+
+(s/def :internal.gradient/stops
+  (s/coll-of :internal.gradient/stop :kind vector?))
 
 (s/def ::gradient
-  (s/keys :req-un [:internal.page.gradient/start-x
-                   :internal.page.gradient/start-y
-                   :internal.page.gradient/end-x
-                   :internal.page.gradient/end-y
-                   :internal.page.gradient/width
-                   :internal.page.gradient/stops]))
+  (s/keys :req-un [:internal.gradient/type
+                   :internal.gradient/start-x
+                   :internal.gradient/start-y
+                   :internal.gradient/end-x
+                   :internal.gradient/end-y
+                   :internal.gradient/width
+                   :internal.gradient/stops]))
 
 ;; Page Options
 (s/def :internal.page.grid.color/value string?)
@@ -292,13 +295,26 @@
                    :internal.page/options
                    :internal.page/objects]))
 
+
 (s/def :internal.color/name ::string)
 (s/def :internal.color/value ::string)
+(s/def :internal.color/color ::string)
+(s/def :internal.color/opacity ::safe-number)
+(s/def :internal.color/gradient ::gradient)
 
 (s/def ::color
   (s/keys :req-un [::id
-                   :internal.color/name
-                   :internal.color/value]))
+                   :internal.color/name]
+          :opt-un [:internal.color/value
+                   :internal.color/color
+                   :internal.color/opacity
+                   :internal.color/gradient]))
+
+(s/def ::recent-color
+  (s/keys :opt-un [:internal.color/value
+                   :internal.color/color
+                   :internal.color/opacity
+                   :internal.color/gradient]))
 
 (s/def :internal.media-object/name ::string)
 (s/def :internal.media-object/path ::string)
@@ -324,7 +340,7 @@
   (s/map-of ::uuid ::color))
 
 (s/def :internal.file/recent-colors
-  (s/coll-of ::string :kind vector?))
+  (s/coll-of ::recent-color :kind vector?))
 
 (s/def :internal.typography/id ::id)
 (s/def :internal.typography/name ::string)
@@ -438,8 +454,10 @@
 (defmethod change-spec :del-color [_]
   (s/keys :req-un [::id]))
 
+(s/def :internal.changes.add-recent-color/color ::recent-color)
+
 (defmethod change-spec :add-recent-color [_]
-  (s/keys :req-un [:recent-color/color]))
+  (s/keys :req-un [:internal.changes.add-recent-color/color]))
 
 (s/def :internal.changes.media/object ::media-object)
 
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 134d14d655..cef562e72d 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -78,3 +78,4 @@
 @import 'main/partials/user-settings';
 @import 'main/partials/workspace';
 @import 'main/partials/workspace-header';
+@import 'main/partials/color-bullet';
diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss
new file mode 100644
index 0000000000..a8045591c4
--- /dev/null
+++ b/frontend/resources/styles/main/partials/color-bullet.scss
@@ -0,0 +1,173 @@
+// 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/.
+//
+// This Source Code Form is "Incompatible With Secondary Licenses", as
+// defined by the Mozilla Public License, v. 2.0.
+//
+// Copyright (c) 2020 UXBOX Labs SL
+
+.color-cell {
+  .color-bullet {
+    background-color: $color-white;
+    // Creates strange artifacts
+    border: 2px solid $color-gray-60;
+    // box-shadow: 0 0 0 2px $color-gray-60;
+    border-radius: 50%;
+  }
+
+  &.cell-big .color-bullet {
+    width: 50px;
+    height: 50px;
+  }
+
+  &.cell-small .color-bullet {
+    width: 40px;
+    height: 40px;
+  }
+
+  .color-bullet.color-big {
+    width: 50px;
+    height: 50px;
+  }
+
+}
+
+.color-cell.current {
+  .color-bullet {
+    border-color: $color-gray-50;
+  }
+}
+
+ul.palette-menu .color-bullet {
+  width: 20px;
+  height: 20px;
+  border-radius: 12px;
+  border: 1px solid $color-gray-10;
+  margin-right: 5px;
+  background-size: 8px;
+}
+.color-cell.add-color .color-bullet {
+  align-items: center;
+  background-color: $color-gray-50;
+  border: 3px dashed $color-gray-10;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
+  padding: .6rem;
+
+  svg {
+    fill: $color-gray-10;
+    height: 30px;
+    width: 30px;
+  }
+}
+
+.colorpicker-content .color-bullet {
+  grid-area: color;
+  width: 20px;
+  height: 20px;
+  background-color: rgba(var(--color));
+  border-radius: 12px;
+  border: 1px solid $color-gray-10;
+  background-size: 8px;
+}
+
+.asset-group .group-list-item .color-bullet {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  margin-right: $x-small;
+}
+
+.color-cell.add-color:hover .color-bullet {
+  border-color: $color-gray-30;
+
+  svg {
+    fill: $color-gray-30;
+  }
+}
+
+.color-bullet {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+
+  & > * {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+
+.color-data .color-bullet {
+  background-color: $color-gray-30;
+  border: 1px solid $color-gray-30;
+  border-radius: $br-small;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $color-gray-10;
+  flex-shrink: 0;
+  height: 20px;
+  margin: 5px 4px 0 0;
+  width: 20px;
+
+  &.color-name {
+    border-radius: 10px;
+  }
+
+  &.palette-th {
+    align-items: center;
+    border: 1px solid $color-gray-30;
+    display: flex;
+    justify-content: center;
+
+    svg {
+      fill: $color-gray-30;
+      height: 16px;
+      width: 16px;
+    }
+
+    &:hover {
+      border-color: $color-primary;
+      svg {
+        fill: $color-primary;
+      }
+
+    }
+  }
+}
+
+.colorpicker-content .libraries .selected-colors .color-bullet {
+  grid-area: auto;
+  margin-bottom: 0.25rem;
+  cursor: pointer;
+
+  &:hover {
+    border-color: $color-primary;
+  }
+
+  &.button {
+    background: $color-white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.button svg {
+    width: 12px;
+    height: 12px;
+    fill: $color-gray-30;
+  }
+
+  &.plus-button svg {
+    width: 8px;
+    height: 8px;
+    fill: $color-black;
+  }
+}
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index c4a702eee6..7bd2ab47f9 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -123,7 +123,7 @@
   display: flex;
   overflow: hidden;
   width: 100%;
-  height: 4.8rem;
+  height: 5rem;
   padding: 0.25rem;
 
   &.size-small {
@@ -156,28 +156,6 @@
       flex-basis: 52px;
   }
 
-  .color {
-    background-color: $color-gray-10;
-    border: 2px solid $color-gray-60;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  &.cell-big .color {
-      width: 50px;
-      height: 50px;
-  }
-
-  &.cell-small .color {
-      width: 40px;
-      height: 40px;
-  }
-
-  .color.color-big {
-      width: 50px;
-      height: 50px;
-  }
-
   .color-text {
     color: $color-gray-20;
     font-size: $fs12;
@@ -186,11 +164,9 @@
     text-overflow: ellipsis;
     width: 66px;
     text-align: center;
+    margin-top: 0.25rem;
   }
   &.current {
-    .color {
-      border-color: $color-gray-50;
-    }
     .color-text {
       color: $color-gray-50;
       font-weight: bold;
@@ -217,31 +193,11 @@
   }
   &.add-color {
     margin-left: 1.5rem;
-    .color {
-      align-items: center;
-      background-color: $color-gray-50;
-      border: 3px dashed $color-gray-10;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      margin-bottom: 1rem;
-      padding: .6rem;
-      svg {
-        fill: $color-gray-10;
-        height: 30px;
-        width: 30px;
-      }
-    }
+
     .color-text {
       font-weight: bold;
     }
     &:hover {
-      .color {
-        border-color: $color-gray-30;
-        svg {
-          fill: $color-gray-30;
-        }
-      }
       .color-text {
         color: $color-gray-40;
       }
@@ -336,12 +292,5 @@ ul.palette-menu {
         margin-top: 0.5rem;
     }
 
-    .color-bullet {
-        width: 20px;
-        height: 20px;
-        border-radius: 12px;
-        border: 1px solid $color-gray-10;
-        margin-right: 5px;
-    }
 }
 
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index 45a62c6c0d..e65658d937 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -241,15 +241,6 @@
     }
   }
 
-  .color-bullet {
-    grid-area: color;
-    width: 20px;
-    height: 20px;
-    background-color: rgba(var(--color));
-    border-radius: 12px;
-    border: 1px solid $color-gray-10;
-  }
-
   .shade-selector {
     display: grid;
     justify-items: center;
@@ -340,34 +331,6 @@
       content: "";
       flex: auto;
     }
-
-    .selected-colors .color-bullet {
-      grid-area: auto;
-      margin-bottom: 0.25rem;
-      cursor: pointer;
-
-      &:hover {
-        border-color: $color-primary;
-      }
-
-      &.button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      &.button svg {
-        width: 12px;
-        height: 12px;
-        fill: $color-gray-30;
-      }
-
-      &.plus-button svg {
-        width: 8px;
-        height: 8px;
-        fill: $color-black;
-      }
-    }
   }
 
   .actions {
diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss
index d4d6ff4ed9..a99b426fbf 100644
--- a/frontend/resources/styles/main/partials/sidebar-assets.scss
+++ b/frontend/resources/styles/main/partials/sidebar-assets.scss
@@ -241,13 +241,6 @@
       color: $color-white;
       cursor: pointer;
 
-      & .color-block {
-        width: 20px;
-        height: 20px;
-        border-radius: 10px;
-        margin-right: $x-small;
-      }
-
       & span {
         margin-left: $x-small;
         color: $color-gray-30;
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 12510697f6..4f2077067a 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -467,47 +467,6 @@
   margin-bottom: 0;
 }
 
-.color-th {
-  background-color: $color-gray-30;
-  border: 1px solid $color-gray-30;
-  border-radius: $br-small;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $color-gray-10;
-  flex-shrink: 0;
-  height: 20px;
-  margin: 5px 4px 0 0;
-  width: 20px;
-
-  &.color-name {
-      border-radius: 10px;
-  }
-
-  &.palette-th {
-    align-items: center;
-    border: 1px solid $color-gray-30;
-    display: flex;
-    justify-content: center;
-
-    svg {
-      fill: $color-gray-30;
-      height: 16px;
-      width: 16px;
-    }
-
-    &:hover {
-      border-color: $color-primary;
-      svg {
-        fill: $color-primary;
-      }
-
-    }
-
-  }
-}
-
 .presets {
   .custom-select-dropdown {
     width: 200px;
diff --git a/frontend/src/app/main/data/colors.cljs b/frontend/src/app/main/data/colors.cljs
index 038ec1ed73..16d49b9b0c 100644
--- a/frontend/src/app/main/data/colors.cljs
+++ b/frontend/src/app/main/data/colors.cljs
@@ -104,7 +104,7 @@
           (assoc-in [:workspace-local :picked-color-select] value)
           (assoc-in [:workspace-local :picked-shift?] shift?)))))
 
-(defn change-fill2
+(defn change-fill
   ([ids color]
    (ptk/reify ::change-fill
      ptk/WatchEvent
@@ -133,7 +133,7 @@
                    (map #(dwt/update-text-attrs {:id % :editor (get editors %) :attrs attrs}) text-ids)
                    (dwc/update-shapes shape-ids update-fn))))))))
 
-(defn change-fill
+#_(defn change-fill
   ([ids color id file-id]
    (change-fill ids color 1 id file-id))
   ([ids color opacity id file-id]
@@ -163,7 +163,7 @@
                    (map #(dwt/update-text-attrs {:id % :editor (get editors %) :attrs attrs}) text-ids)
                    (dwc/update-shapes shape-ids update-fn))))))))
 
-(defn change-stroke2 [ids color]
+(defn change-stroke [ids color]
   (ptk/reify ::change-stroke
     ptk/WatchEvent
     (watch [_ state s]
@@ -184,7 +184,8 @@
                                  :stroke-width 1
                                  :stroke-opacity 1)))]
         (rx/of (dwc/update-shapes ids update-fn))))))
-(defn change-stroke [ids color id file-id]
+
+#_(defn change-stroke [ids color id file-id]
   (ptk/reify ::change-stroke
     ptk/WatchEvent
     (watch [_ state s]
@@ -212,8 +213,8 @@
           (let [ids (get-in @st/state [:workspace-local :selected])]
             (st/emit!
              (if shift?
-               (change-stroke2 ids color)
-               (change-fill2 ids color))
+               (change-stroke ids color)
+               (change-fill ids color))
              (md/hide))))]
     (ptk/reify ::start-picker
       ptk/UpdateEvent
diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs
index 00226a92ef..344e483b54 100644
--- a/frontend/src/app/main/data/workspace/libraries.cljs
+++ b/frontend/src/app/main/data/workspace/libraries.cljs
@@ -35,23 +35,22 @@
 
 (defn add-color
   [color]
-  (us/assert ::us/string color)
-  (ptk/reify ::add-color
-    ptk/WatchEvent
-    (watch [_ state s]
-      (let [id   (uuid/next)
-            rchg {:type :add-color
-                  :color {:id id
-                          :name color
-                          :value color}}
-            uchg {:type :del-color
-                  :id id}]
-        (rx/of #(assoc-in % [:workspace-local :color-for-rename] id)
-               (dwc/commit-changes [rchg] [uchg] {:commit-local? true}))))))
+  (let [id   (uuid/next)
+        color (assoc color :id id)]
+    (us/assert ::cp/color color)
+    (ptk/reify ::add-color
+      ptk/WatchEvent
+      (watch [_ state s]
+        (let [rchg {:type :add-color
+                    :color color}
+              uchg {:type :del-color
+                    :id id}]
+          (rx/of #(assoc-in % [:workspace-local :color-for-rename] id)
+                 (dwc/commit-changes [rchg] [uchg] {:commit-local? true})))))))
 
 (defn add-recent-color
   [color]
-  (us/assert ::us/string color)
+  (us/assert ::cp/recent-color color)
   (ptk/reify ::add-recent-color
     ptk/WatchEvent
     (watch [_ state s]
diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs
new file mode 100644
index 0000000000..f3bb31826c
--- /dev/null
+++ b/frontend/src/app/main/ui/components/color_bullet.cljs
@@ -0,0 +1,52 @@
+;; 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/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.color-bullet
+  (:require
+   #_[beicon.core :as rx]
+   #_[goog.events :as events]
+   #_[okulary.core :as l]
+   [rumext.alpha :as mf]
+   [app.util.color :as uc]
+   #_[cuerdas.core :as str]
+   #_[app.common.math :as mth]
+   #_[app.main.data.colors :as mdc]
+   #_[app.main.data.workspace :as udw]
+   #_[app.main.store :as st]
+   #_[app.main.ui.components.dropdown :refer [dropdown]]
+   #_[app.main.ui.icons :as i]
+   #_[app.main.ui.keyboard :as kbd]
+   #_[app.util.color :refer [hex->rgb]]
+   #_[app.util.dom :as dom]
+   #_[app.util.object :as obj]
+   #_[app.main.refs :as refs]
+   #_[app.util.i18n :as i18n :refer [t]]))
+
+(mf/defc color-bullet [{:keys [color on-click]}]
+  (let [color (if (string? color) {:color color :opacity 1} color)]
+    [:div.color-bullet {:on-click #(when on-click (on-click %))}
+     (when (not (:gradient color))
+       [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}])
+
+     [:div.color-bullet-right {:style {:background (uc/color->background color)}}]]))
+
+(defn gradient-type->string [{:keys [type]}]
+  (case type
+    :linear "Linear"
+    :radial "Radial"))
+
+(mf/defc color-name [{:keys [color size on-click on-double-click]}]
+  (let [color (if (string? color) {:color color :opacity 1} color)
+        {:keys [name color opacity gradient]} color
+        color-str (or name color (gradient-type->string gradient))]
+    #_(when (= size :big) [:span.color-text {:title (:name color) } (or (:name color) (:value color))])
+    (when (= size :big)
+      [:span.color-text {:on-click #(when on-click (on-click %))
+                         :on-double-click #(when on-double-click (on-double-click %))
+                         :title name } color-str])))
diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs
index bfda8cd1b3..8a26130c78 100644
--- a/frontend/src/app/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs
@@ -19,6 +19,7 @@
    [app.main.data.workspace :as udw]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.components.color-bullet :refer [color-bullet color-name]]
    [app.main.ui.icons :as i]
    [app.main.ui.keyboard :as kbd]
    [app.util.color :refer [hex->rgb]]
@@ -55,14 +56,13 @@
         (fn [event]
           (let [ids (get-in @st/state [:workspace-local :selected])]
             (if (kbd/shift? event)
-              (st/emit! (mdc/change-stroke ids (:value color) id file-id))
-              (st/emit! (mdc/change-fill ids (:value color) id file-id)))))]
+              (st/emit! (mdc/change-stroke ids color))
+              (st/emit! (mdc/change-fill ids color)))))]
 
     [:div.color-cell {:class (str "cell-"(name size))
-                      :key (or (str (:id color)) (:value color))
                       :on-click select-color}
-     [:span.color {:style {:background (:value color)}}]
-     (when (= size :big) [:span.color-text {:title (:name color) } (or (:name color) (:value color))])]))
+     [:& color-bullet {:color color}]
+     [:& color-name {:color color :size size}]]))
 
 (mf/defc palette
   [{:keys [left-sidebar? current-colors recent-colors file-colors shared-libs selected size]}]
@@ -138,9 +138,9 @@
             (when (= selected (:id cur-library)) i/tick)
             [:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count colors)))]
             [:div.color-sample
-             (for [[idx {:keys [id value]}] (map-indexed vector (take 7 colors))]
-               [:div.color-bullet {:key (str "color-" idx)
-                                   :style {:background-color value}}])]]))
+             (for [[idx {:keys [id color]}] (map-indexed vector (take 7 colors))]
+               [:& color-bullet {:key (str "color-" idx)
+                                 :color color}])]]))
 
 
        [:li.palette-library
@@ -149,9 +149,9 @@
         [:div.library-name (str (t locale "workspace.libraries.colors.file-library")
                                 (str/format " (%s)" (count file-colors)))]
         [:div.color-sample
-         (for [[idx {:keys [value]}] (map-indexed vector (take 7 (vals file-colors))) ]
-           [:div.color-bullet {:key (str "color-" idx)
-                               :style {:background-color value}}])]]
+         (for [[idx color] (map-indexed vector (take 7 (vals file-colors))) ]
+           [:& color-bullet {:key (str "color-" idx)
+                             :color color}])]]
 
        [:li.palette-library
         {:on-click #(st/emit! (mdc/change-palette-selected :recent))}
@@ -159,9 +159,9 @@
         [:div.library-name (str (t locale "workspace.libraries.colors.recent-colors")
                                 (str/format " (%s)" (count recent-colors)))]
         [:div.color-sample
-         (for [[idx value] (map-indexed vector (take 7 (reverse recent-colors))) ]
-           [:div.color-bullet {:key (str "color-" idx)
-                               :style {:background-color value}}])]]
+         (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
+           [:& color-bullet {:key (str "color-" idx)
+                             :color color}])]]
 
        [:hr.dropdown-separator]
 
@@ -191,14 +191,8 @@
 
      [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
 
-(defn recent->colors [recent-colors]
-  (map #(hash-map :value %) (reverse (or recent-colors []))))
-
-(defn file->colors [file-colors]
-  (map #(select-keys % [:id :value :name]) (vals file-colors)))
-
 (defn library->colors [shared-libs selected]
-  (map #(merge {:file-id selected} (select-keys % [:id :value :name]))
+  (map #(merge {:file-id selected} %)
        (vals (get-in shared-libs [selected :data :colors]))))
 
 (mf/defc colorpalette
@@ -217,21 +211,21 @@
        (reset! current-library-colors
                (into []
                      (cond
-                       (= selected :recent) (recent->colors recent-colors)
-                       (= selected :file)   (file->colors file-colors)
+                       (= selected :recent) (reverse recent-colors)
+                       (= selected :file)   (vals file-colors)
                        :else                (library->colors shared-libs selected))))))
 
     (mf/use-effect
      (mf/deps recent-colors)
      (fn []
        (when (= selected :recent)
-         (reset! current-library-colors (into [] (recent->colors recent-colors))))))
+         (reset! current-library-colors (reverse recent-colors)))))
 
     (mf/use-effect
      (mf/deps file-colors)
      (fn []
        (when (= selected :file)
-         (reset! current-library-colors (into [] (file->colors file-colors))))))
+         (reset! current-library-colors (into [] (vals file-colors))))))
 
     [:& palette {:left-sidebar? left-sidebar?
                  :current-colors @current-library-colors
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index d8f7936566..dd7df33e5c 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -207,7 +207,7 @@
               (dom/set-css-property node "--saturation-grad-to" (format-hsl hsl-to)))))
 
     ;; When closing the modal we update the recent-color list
-    #_(mf/use-effect
+    (mf/use-effect
      (fn [] (fn []
               (st/emit! (dc/stop-picker))
               (st/emit! (dwl/add-recent-color (state->data @state))))))
@@ -276,6 +276,14 @@
                      :editing-stop (:editing-stop @state)
                      :on-select-stop handle-change-stop}]
 
+      [:div.colorpicker-tabs
+       [:div.colorpicker-tab {:class (when (= @active-tab :ramp) "active")
+                              :on-click (change-tab :ramp)} i/picker-ramp]
+       [:div.colorpicker-tab {:class (when (= @active-tab :harmony) "active")
+                              :on-click (change-tab :harmony)} i/picker-harmony]
+       [:div.colorpicker-tab {:class (when (= @active-tab :hsva) "active")
+                              :on-click (change-tab :hsva)} i/picker-hsv]]
+
       (if picking-color?
         [:div.picker-detail-wrapper
          [:div.center-circle]
@@ -299,13 +307,7 @@
 
       [:& libraries {:current-color current-color
                      :on-select-color on-select-library-color}]]
-     [:div.colorpicker-tabs
-      [:div.colorpicker-tab {:class (when (= @active-tab :ramp) "active")
-                             :on-click (change-tab :ramp)} i/picker-ramp]
-      [:div.colorpicker-tab {:class (when (= @active-tab :harmony) "active")
-                             :on-click (change-tab :harmony)} i/picker-harmony]
-      [:div.colorpicker-tab {:class (when (= @active-tab :hsva) "active")
-                             :on-click (change-tab :hsva)} i/picker-hsv]]
+
      (when on-accept
        [:div.actions
         [:button.btn-primary.btn-large
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
index 56d1fe0a8f..3c4a04c817 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
@@ -25,6 +25,7 @@
    [app.main.data.modal :as modal]
    [app.main.ui.icons :as i]
    [app.util.i18n :as i18n :refer [t]]
+   [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
    [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
    [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
@@ -53,13 +54,14 @@
        (let [mapped-colors
              (cond
                (= @selected-library "recent")
-               (map #(hash-map :value %) (reverse (or recent-colors [])))
+               ;; The `map?` check is to keep backwards compatibility. We transform from string to map
+               (map #(if (map? %) % (hash-map :color %)) (reverse (or recent-colors [])))
 
                (= @selected-library "file")
-               (map #(select-keys % [:id :value]) (vals file-colors))
+               (vals file-colors)
 
                :else ;; Library UUID
-               (map #(merge {:file-id (uuid @selected-library)} (select-keys % [:id :value]))
+               (map #(merge {:file-id (uuid @selected-library)})
                     (vals (get-in shared-libs [(uuid @selected-library) :data :colors]))))]
          (reset! current-library-colors (into [] mapped-colors)))))
 
@@ -94,7 +96,6 @@
        i/palette]
 
       (for [[idx color] (map-indexed vector @current-library-colors)]
-        [:div.color-bullet
-         {:key (str "color-" idx)
-          :on-click #(on-select-color color)
-          :style {:background (uc/color->background color)}}])]]))
+        [:& color-bullet {:key (str "color-" idx)
+                          :color color
+                          :on-click #(on-select-color color)}])]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index c2c638a7f9..5cc267d926 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -28,6 +28,7 @@
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.workspace.sidebar.options.typography :refer [typography-entry]]
+   [app.main.ui.components.color-bullet :refer [color-bullet color-name gradient-type->string]]
    [app.main.ui.icons :as i]
    [app.main.ui.keyboard :as kbd]
    [app.main.data.modal :as modal]
@@ -198,12 +199,18 @@
                                  :top nil
                                  :left nil
                                  :editing rename?})
+
+        default-name (cond
+                       (:gradient color) (gradient-type->string (:gradient color))
+                       (:color color) (:color color)
+                       :else (:value color))
+
         click-color
         (fn [event]
           (let [ids (get-in @st/state [:workspace-local :selected])]
             (if (kbd/shift? event)
-              (st/emit! (dc/change-stroke ids (:value color) id (if local? nil file-id)))
-              (st/emit! (dc/change-fill ids (:value color) id (if local? nil file-id))))))
+              (st/emit! (dc/change-stroke ids color))
+              (st/emit! (dc/change-fill ids color)))))
 
         rename-color
         (fn [name]
@@ -211,7 +218,7 @@
 
         edit-color
         (fn [value]
-          (st/emit! (dwl/update-color (assoc color :value value))))
+          (st/emit! (dwl/update-color (assoc color :color value))))
 
         delete-color
         (fn []
@@ -245,7 +252,7 @@
                        {:x (.-clientX event)
                         :y (.-clientY event)
                         :on-accept edit-color
-                        :value (:value color)
+                        :data color
                         :disable-opacity true
                         :position :right}))
 
@@ -269,7 +276,8 @@
          nil))
 
     [:div.group-list-item {:on-context-menu on-context-menu}
-     [:div.color-block {:style {:background-color (:value color)}}]
+     [:& color-bullet {:color color}]
+
      (if (:editing @state)
        [:input.element-name
         {:type "text"
@@ -278,12 +286,13 @@
          :on-key-down input-key-down
          :auto-focus true
          :default-value (:name color "")}]
+
        [:div.name-block
         {:on-double-click rename-color-clicked
          :on-click click-color}
         (:name color)
-        (when-not (= (:name color) (:value color))
-          [:span (:value color)])])
+        (when-not (= (:name color) default-name)
+          [:span default-name])])
      (when local?
        [:& context-menu
          {:selectable false
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
index 005c6333ab..b2b879a7e7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
@@ -63,20 +63,20 @@
         (mf/use-callback
          (mf/deps ids)
          (fn [event]
-           (st/emit! (dc/change-fill2 ids {:color cp/default-color
+           (st/emit! (dc/change-fill ids {:color cp/default-color
                                            :opacity 1}))))
 
         on-delete
         (mf/use-callback
          (mf/deps ids)
          (fn [event]
-           (st/emit! (dc/change-fill2 ids nil))))
+           (st/emit! (dc/change-fill ids nil))))
 
         on-change
         (mf/use-callback
          (mf/deps ids)
          (fn [color]
-           (st/emit! (dc/change-fill2 ids color))))
+           (st/emit! (dc/change-fill ids color))))
 
         on-open-picker
         (mf/use-callback
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index 93439b626d..2812a90568 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -12,6 +12,7 @@
    [rumext.alpha :as mf]
    [cuerdas.core :as str]
    [app.common.math :as math]
+   [app.main.ui.components.color-bullet :refer [color-bullet color-name]]
    [app.util.dom :as dom]
    [app.util.data :refer [classnames]]
    [app.util.i18n :as i18n :refer [tr]]
@@ -115,7 +116,9 @@
        (modal/update-props! :colorpicker {:data (parse-color color)})))
 
     [:div.row-flex.color-data
-     [:span.color-th
+     [:& color-bullet {:color color
+                       :on-click handle-click-color}]
+     #_[:span.color-th
       {:class (when (and (:id color) (not= (:id color) :multiple)) "color-name")
        :style {:background (uc/color->background color)}
        :on-click handle-click-color}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
index a8927137b5..4dd600c140 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
@@ -14,6 +14,7 @@
    [app.common.data :as d]
    [app.common.math :as math]
    [app.main.data.workspace.common :as dwc]
+   [app.main.data.colors :as dc]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@@ -29,7 +30,8 @@
    :stroke-color
    :stroke-color-ref-id
    :stroke-color-ref-file
-   :stroke-opacity])
+   :stroke-opacity
+   :stroke-color-gradient])
 
 (defn- stroke-menu-props-equals?
   [np op]
@@ -72,19 +74,17 @@
 
         show-options (not= (:stroke-style values :none) :none)
 
-        current-stroke-color {:value (:stroke-color values)
+        current-stroke-color {:color (:stroke-color values)
                               :opacity (:stroke-opacity values)
                               :id (:stroke-color-ref-id values)
-                              :file-id (:stroke-color-ref-file values)}
+                              :file-id (:stroke-color-ref-file values)
+                              :gradient (:stroke-color-gradient values)}
 
         handle-change-stroke-color
-        (fn [value opacity id file-id]
-          (let [change #(cond-> %
-                          value (assoc :stroke-color value
-                                       :stroke-color-ref-id id
-                                       :stroke-color-ref-file file-id)
-                          opacity (assoc :stroke-opacity opacity))]
-            (st/emit! (dwc/update-shapes ids change))))
+        (mf/use-callback
+         (mf/deps ids)
+         (fn [color]
+           (st/emit! (dc/change-stroke ids color))))
 
         on-stroke-style-change
         (fn [event]