diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index ca1c5c61b..bb6dafbfb 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -55,6 +55,7 @@
 @import "main/partials/zoom-widget";
 @import "main/partials/activity-bar";
 @import "main/partials/color-palette";
+@import "main/partials/text-palette";
 @import "main/partials/colorpicker";
 @import "main/partials/dashboard";
 @import "main/partials/dashboard-header";
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index f61657c1f..21939482a 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -9,7 +9,9 @@
   align-items: center;
   background-color: $color-gray-50;
   border-top: 1px solid $color-gray-60;
-  display: flex;
+
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto;
   
   z-index: 11;
 
@@ -252,7 +254,7 @@
 ul.palette-menu {
   left: 8px;
   top: auto;
-  bottom: 4.5rem;
+  bottom: var(--height);
   color: $color-black;
 
   li {
diff --git a/frontend/resources/styles/main/partials/text-palette.scss b/frontend/resources/styles/main/partials/text-palette.scss
new file mode 100644
index 000000000..a48fc32eb
--- /dev/null
+++ b/frontend/resources/styles/main/partials/text-palette.scss
@@ -0,0 +1,24 @@
+.typography-item {
+  padding: 0 1rem;
+  margin-right: 1rem;
+  cursor: pointer;
+
+  & > * {
+    white-space: nowrap;
+  }
+
+  & .typography-name {
+    color: $color-white;
+  }
+
+  & .typography-font, & .typography-data {
+    font-size: 16px;
+    color: #7B7D85;
+  }
+
+  .no-text & {
+    & .typography-font, & .typography-data {
+      display: none;
+    }
+  }
+}
diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 7478edc3f..15fdbb936 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -92,7 +92,7 @@
   (l/derived :workspace-drawing st/state))
 
 (def selected-shapes
-  (l/derived wsh/lookup-selected st/state))
+  (l/derived wsh/lookup-selected st/state =))
 
 (defn make-selected-ref
   [id]
diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs
index a5d43895c..181890907 100644
--- a/frontend/src/app/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs
@@ -6,7 +6,6 @@
 
 (ns app.main.ui.workspace.colorpalette
   (:require
-   [app.common.data :as d]
    [app.common.math :as mth]
    [app.main.data.workspace.colors :as mdc]
    [app.main.refs :as refs]
@@ -55,7 +54,7 @@
 
 (mf/defc palette
   [{:keys [current-colors recent-colors file-colors shared-libs selected]}]
-  (let [state      (mf/use-state {:show-menu false })
+  (let [state      (mf/use-state {:show-menu false})
 
         width      (:width @state 0)
         visible    (mth/round (/ width 66))
@@ -180,6 +179,7 @@
            (vals))))
 
 (mf/defc colorpalette
+  {::mf/wrap [mf/memo]}
   []
   (let [recent-colors (mf/deref refs/workspace-recent-colors)
         file-colors   (mf/deref refs/workspace-file-colors)
diff --git a/frontend/src/app/main/ui/workspace/textpalette.cljs b/frontend/src/app/main/ui/workspace/textpalette.cljs
index 36c047960..c64eb2148 100644
--- a/frontend/src/app/main/ui/workspace/textpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/textpalette.cljs
@@ -6,26 +6,162 @@
 
 (ns app.main.ui.workspace.textpalette
   (:require
-   #_[app.util.dom :as dom]
-   #_[app.common.data :as d]
-   #_[app.common.math :as mth]
-   #_[app.main.data.workspace.colors :as mdc]
-   #_[app.main.refs :as refs]
-   #_[app.main.store :as st]
-   #_[app.main.ui.components.color-bullet :as cb]
-   #_[app.main.ui.components.dropdown :refer [dropdown]]
-   #_[app.main.ui.hooks.resize :refer [use-resize-hook]]
-   #_[app.main.ui.icons :as i]
-   #_[app.util.color :as uc]
-   #_[app.util.i18n :refer [tr]]
-   #_[app.util.keyboard :as kbd]
-   #_[app.util.object :as obj]
-   #_[cuerdas.core :as str]
-   #_[goog.events :as events]
-   #_[okulary.core :as l]
-   [rumext.alpha :as mf]
-   ))
+   [app.common.data :as d]
+   [app.main.data.workspace.texts :as dwt]
+   [app.main.fonts :as f]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.hooks.resize :refer [use-resize-hook]]
+   [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
+   [app.util.i18n :refer [tr]]
+   [cuerdas.core :as str]
+   [okulary.core :as l]
+   [rumext.alpha :as mf]))
+
+(mf/defc typography-item
+  [{:keys [local file-id selected-ids typography name-only?]}]
+  (let [font-data (f/get-font-data (:font-id typography))
+        font-variant-id (:font-variant-id typography)
+        variant-data (->> font-data :variants (d/seek #(= (:id %) font-variant-id)))
+
+        handle-click
+        (mf/use-callback
+         (mf/deps local typography selected-ids)
+         (fn []
+           (let [attrs (merge
+                        {:typography-ref-file file-id
+                         :typography-ref-id (:id typography)}
+                        (dissoc typography :id :name))]
+             (->> selected-ids
+                  (run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs})))))))]
+
+    [:div.typography-item {:on-click handle-click}
+     [:div.typography-name
+      {:style {:font-family (:font-family typography)
+               :font-weight (:font-weight typography)
+               :font-style (:font-style typography)}}
+      (:name typography)]
+     (when-not name-only?
+       [:*
+        [:div.typography-font (:name font-data)]
+        [:div.typography-data (str (:font-size typography) "pt | " (:name variant-data))]])]))
+
+(mf/defc palette
+  [{:keys [local selected-ids current-file-id file-typographies shared-libs]}]
+
+  (let [state (mf/use-state {:show-menu false})
+
+        selected (mf/use-state :file)
+
+        file-id
+        (case @selected
+          :recent nil
+          :file current-file-id
+          @selected)
+
+        current-typographies
+        (case @selected
+          :recent []
+          :file (vals file-typographies)
+          (vals (get-in shared-libs [@selected :data :typographies])))
+
+        container (mf/use-ref nil)
+
+        on-left-arrow-click
+        (mf/use-callback
+         (fn []
+           (when-let [node (mf/ref-val container)]
+             (.scrollBy node #js {:left -200 :behavior "smooth"}))))
+
+        on-right-arrow-click
+        (mf/use-callback
+         (fn []
+           (when-let [node (mf/ref-val container)]
+             (.scrollBy node #js {:left 200 :behavior "smooth"}))))
+
+        on-wheel
+        (mf/use-callback
+         (fn [event]
+           (let [delta (+ (.. event -nativeEvent -deltaY) (.. event -nativeEvent -deltaX))]
+             (if (pos? delta)
+               (on-right-arrow-click)
+               (on-left-arrow-click)))))
+
+        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+        (use-resize-hook :palette 72 54 80 :y true :bottom)]
+    
+    [:div.color-palette {:ref parent-ref
+                         :class (dom/classnames :no-text (< size 72))
+                         :style #js {"--height" (str size "px")}}
+     [:div.resize-area {:on-pointer-down on-pointer-down
+                        :on-lost-pointer-capture on-lost-pointer-capture
+                        :on-mouse-move on-mouse-move}]
+     [:& dropdown {:show (:show-menu @state)
+                   :on-close #(swap! state assoc :show-menu false)}
+
+      [:ul.workspace-context-menu.palette-menu
+       (for [[idx cur-library] (map-indexed vector (vals shared-libs))]
+         (let [typographies (-> cur-library (get-in [:data :typographies]) vals)]
+           [:li.palette-library
+            {:key (str "library-" idx)
+             :on-click #(reset! selected (:id cur-library))}
+
+            (when (= @selected (:id cur-library)) i/tick)
+
+            [:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count typographies)))]]))
+
+       [:li.palette-library
+        {:on-click #(reset! selected :file)}
+        (when (= selected :file) i/tick)
+        [:div.library-name (str (tr "workspace.libraries.colors.file-library")
+                                (str/format " (%s)" (count file-typographies)))]]
+
+       #_[:li.palette-library
+        {:on-click #(st/emit! (mdc/change-palette-selected :recent))}
+        (when (= selected :recent) i/tick)
+        [:div.library-name (str (tr "workspace.libraries.colors.recent-colors")
+                                (str/format " (%s)" (count recent-colors)))]
+        [:div.color-sample
+         (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
+           [:& cb/color-bullet {:key (str "color-" idx)
+                                :color color}])]]
+       ]]
+
+     [:div.color-palette-actions
+      {:on-click #(swap! state assoc :show-menu true)}
+      [:div.color-palette-actions-button i/actions]]
+
+     [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
+
+     [:div.color-palette-content {:ref container :on-wheel on-wheel}
+      [:div.color-palette-inside {:style {:position "relative"}}
+       (for [[idx item] (map-indexed vector current-typographies)]
+         [:& typography-item
+          {:key idx
+           :file-id file-id
+           :local local
+           :selected-ids selected-ids
+           :typography item}])]]
+
+     [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]])
+
+  )
+
+(def local-data
+  (l/derived #(select-keys % [:editors]) refs/workspace-local =))
 
 (mf/defc textpalette
+  {::mf/wrap [mf/memo]}
   []
-  [:div])
+  (let [local             (mf/deref local-data)
+        selected-ids      (mf/deref refs/selected-shapes)
+        file-typographies (mf/deref refs/workspace-file-typography)
+        shared-libs       (mf/deref refs/workspace-libraries)
+        current-file-id   (mf/deref refs/current-file-id)]
+    [:& palette {:local local
+                 :current-file-id current-file-id
+                 :selected-ids selected-ids
+                 :file-typographies file-typographies
+                 :shared-libs shared-libs}]))