diff --git a/backend/scripts/repl b/backend/scripts/repl
index 629229d6d..04865d100 100755
--- a/backend/scripts/repl
+++ b/backend/scripts/repl
@@ -30,7 +30,9 @@ export PENPOT_FLAGS="\
        enable-access-tokens \
        enable-tiered-file-data-storage \
        enable-file-validation \
-       enable-file-schema-validation";
+       enable-file-schema-validation \
+       enable-subscriptons \
+       enable-subscriptons-old";
 
 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"
diff --git a/backend/scripts/start-dev b/backend/scripts/start-dev
index df8d50973..5f446ef81 100755
--- a/backend/scripts/start-dev
+++ b/backend/scripts/start-dev
@@ -23,7 +23,9 @@ export PENPOT_FLAGS="\
        enable-access-tokens \
        enable-tiered-file-data-storage \
        enable-file-validation \
-       enable-file-schema-validation";
+       enable-file-schema-validation \
+       enable-subscriptons \
+       enable-subscriptons-old ";
 
 # Default deletion delay for devenv
 export PENPOT_DELETION_DELAY="24h"
diff --git a/common/src/app/common/flags.cljc b/common/src/app/common/flags.cljc
index 45a5e8916..371d88923 100644
--- a/common/src/app/common/flags.cljc
+++ b/common/src/app/common/flags.cljc
@@ -124,7 +124,9 @@
     ;; TODO: deprecate this flag and consolidate the code
     :export-file-v3
     :render-wasm-dpr
-    :hide-release-modal})
+    :hide-release-modal
+    :subscriptions
+    :subscriptions-old})
 
 (def all-flags
   (set/union email login varia))
diff --git a/frontend/resources/images/icons/crown.svg b/frontend/resources/images/icons/crown.svg
new file mode 100644
index 000000000..086dc5fa2
--- /dev/null
+++ b/frontend/resources/images/icons/crown.svg
@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16">
+  <path d="M8 1.8a.35.35 0 0 0-.3.18l-2.08 3.9a.7.7 0 0 1-1.06.21l-3-2.55a.35.35 0 0 0-.55.36l1.98 7.15a.7.7 0 0 0 .67.5h8.68a.7.7 0 0 0 .67-.5l1.98-7.15a.35.35 0 0 0-.56-.36l-3 2.55a.7.7 0 0 1-1.06-.2L8.31 1.98A.35.35 0 0 0 8 1.8ZM3.1 14.35h9.8z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index 143dec77a..f43e86cba 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -194,6 +194,7 @@
         :settings-password
         :settings-options
         :settings-feedback
+        :settings-subscription
         :settings-access-tokens
         :settings-notifications)
        [:? [:& settings-page {:route route}]]
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs
index 1a0d85b74..32386ef98 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.cljs
+++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs
@@ -26,6 +26,7 @@
    [app.main.ui.dashboard.comments :refer [comments-icon* comments-section]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
    [app.main.ui.dashboard.project-menu :refer [project-menu*]]
+   [app.main.ui.dashboard.subscription :as subscription]
    [app.main.ui.dashboard.team-form]
    [app.main.ui.icons :as i :refer [icon-xref]]
    [app.util.dom :as dom]
@@ -962,13 +963,19 @@
            (dom/open-new-window "https://penpot.app/pricing")))]
 
     [:*
-     [:button {:class (stl/css :upgrade-plan-section)
-               :on-click on-power-up-click}
-      [:div {:class (stl/css :penpot-free)}
-       [:span (tr "dashboard.upgrade-plan.penpot-free")]
-       [:span {:class (stl/css :no-limits)} (tr "dashboard.upgrade-plan.no-limits")]]
-      [:div {:class (stl/css :power-up)}
-       (tr "dashboard.upgrade-plan.power-up")]]
+     (when (contains? cf/flags :subscriptions)
+       [:> subscription/sidebar*])
+
+     ;; TODO remove this block when subscriptions is full implemented
+     (when (contains? cf/flags :subscriptions-old)
+       [:button {:class (stl/css :upgrade-plan-section)
+                 :on-click on-power-up-click}
+        [:div {:class (stl/css :penpot-free)}
+         [:span (tr "dashboard.upgrade-plan.penpot-free")]
+         [:span {:class (stl/css :no-limits)} (tr "dashboard.upgrade-plan.no-limits")]]
+        [:div {:class (stl/css :power-up)}
+         (tr "dashboard.upgrade-plan.power-up")]])
+
      (when (and team profile)
        [:& comments-section
         {:profile profile
diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs
new file mode 100644
index 000000000..ba2dccdb5
--- /dev/null
+++ b/frontend/src/app/main/ui/dashboard/subscription.cljs
@@ -0,0 +1,78 @@
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.dashboard.subscription
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.router :as rt]
+   [app.main.store :as st]
+   [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(mf/defc cta-power-up*
+  [{:keys [top-title top-description bottom-description cta-text cta-link has-dropdown]}]
+  (let [show-data* (mf/use-state false)
+        show-data (deref show-data*)
+        handle-click
+        (mf/use-fn
+         (fn [event]
+           (dom/stop-propagation event)
+           (swap! show-data* not)))]
+
+    [:div {:class (stl/css :cta-power-up)
+           :on-click handle-click}
+     [:button {:class (stl/css :cta-top-section)}
+      [:div {:class (stl/css :content)}
+       [:span {:class (stl/css :cta-title)} top-title]
+       [:span {:class (stl/css :cta-text)} top-description]]
+      (when has-dropdown [:span {:class (stl/css :icon-dropdown)}  i/arrow])]
+
+     (when (and has-dropdown show-data)
+       [:div {:class (stl/css :cta-bottom-section)}
+        [:> i18n/tr-html* {:content bottom-description
+                           :class (stl/css :content)
+                           :tag-name "button"}]
+        [:button {:class (stl/css :cta-highlight :cta-link) :on-click cta-link}
+         cta-text]])]))
+
+(mf/defc sidebar*
+  []
+  (let [;; TODO subscription cases professional/unlimited/enterprise
+        subscription-name :unlimited
+        subscription-is-trial false
+
+        go-to-subscription
+        (mf/use-fn #(st/emit! (rt/nav :settings-subscription)))]
+
+    (case subscription-name
+      :professional
+      [:> cta-power-up*
+       {:top-title (tr "subscription.dashboard.power-up.professional.top-title")
+        :top-description (tr "dashboard.upgrade-plan.no-limits")
+        :bottom-description (tr "subscription.dashboard.power-up.professional.bottom-description")
+        :cta-text (tr "dashboard.upgrade-plan.power-up")
+        :cta-link go-to-subscription
+        :has-dropdown true}]
+
+      :unlimited
+      (if subscription-is-trial
+        [:> cta-power-up*
+         {:top-title (tr "subscription.dashboard.power-up.trial.top-title")
+          :top-description (tr "subscription.dashboard.power-up.trial.top-description")
+          :bottom-description (tr "subscription.dashboard.power-up.trial.bottom-description")
+          :cta-text (tr "subscription.dashboard.power-up.subscribe")}]
+
+        [:> cta-power-up*
+         {:top-title (tr "subscription.dashboard.power-up.unlimited-plan")
+          :top-description (tr "subscription.dashboard.power-up.unlimited.top-description")
+          :bottom-description (tr "subscription.dashboard.power-up.unlimited.bottom-description")
+          :cta-text (tr "subscription.dashboard.power-up.unlimited.cta")
+          :cta-link go-to-subscription
+          :has-dropdown true}])
+
+      :enterprise
+      [:> cta-power-up*
+       {:top-title (tr "subscription.dashboard.power-up.enterprise-plan")
+        :top-description (tr "subscription.dashboard.power-up.enterprise.description")
+        :has-dropdown false}])))
diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss
new file mode 100644
index 000000000..2da07be40
--- /dev/null
+++ b/frontend/src/app/main/ui/dashboard/subscription.scss
@@ -0,0 +1,78 @@
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
+@use "../ds/typography.scss" as t;
+@use "../ds/_borders.scss" as *;
+
+.cta-power-up {
+  display: flex;
+  border: $b-1 solid var(--color-background-quaternary);
+  border-radius: var(--sp-s);
+  flex-direction: column;
+  margin: var(--sp-m);
+  padding: var(--sp-m);
+}
+
+.cta-top-section {
+  @include buttonStyle;
+  display: grid;
+  color: var(--color-foreground-secondary);
+  grid-template-columns: 1fr auto;
+}
+
+.cta-top-section .content {
+  display: flex;
+  flex-direction: column;
+}
+
+.icon-dropdown {
+  @include flexCenter;
+  height: 100%;
+  width: $s-16;
+}
+
+.icon-dropdown svg {
+  @extend .button-icon-small;
+  stroke: var(--icon-foreground);
+  transform: rotate(90deg);
+}
+
+.cta-bottom-section {
+  border-block-start: $s-1 solid var(--color-background-quaternary);
+  display: grid;
+  color: var(--color-foreground-secondary);
+  grid-template-columns: 1fr auto;
+  margin-block-start: $s-12;
+  padding-block-start: $s-12;
+}
+.cta-bottom-section .content {
+  @include t.use-typography("body-small");
+  @include buttonStyle;
+  color: var(--color-foreground-secondary);
+  display: inline;
+  text-align: left;
+}
+
+.cta-text,
+.cta-title {
+  text-align: left;
+}
+
+.cta-text {
+  @include t.use-typography("body-small");
+}
+
+.cta-title {
+  @include t.use-typography("body-medium");
+}
+
+.cta-bottom-section .content strong,
+.cta-highlight {
+  @include t.use-typography("body-small");
+  color: var(--color-accent-tertiary);
+}
+
+.cta-link {
+  @include buttonStyle;
+  align-self: end;
+  margin-inline-start: $s-4;
+}
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
index 6e96db767..c06c680bb 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
@@ -113,6 +113,7 @@
 (def ^:icon-id corner-top "corner-top")
 (def ^:icon-id corner-top-left "corner-top-left")
 (def ^:icon-id corner-top-right "corner-top-right")
+(def ^:icon-id crown "crown")
 (def ^:icon-id curve "curve")
 (def ^:icon-id delete "delete")
 (def ^:icon-id delete-text "delete-text")
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index 477470224..372e1016a 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -70,6 +70,8 @@
 (def ^:icon boolean-intersection (icon-xref :boolean-intersection))
 (def ^:icon boolean-union (icon-xref :boolean-union))
 (def ^:icon bug (icon-xref :bug))
+(def ^:icon character-e (icon-xref :character-e))
+(def ^:icon character-u (icon-xref :character-u))
 (def ^:icon clip-content (icon-xref :clip-content))
 (def ^:icon clipboard (icon-xref :clipboard))
 (def ^:icon clock (icon-xref :clock))
@@ -91,6 +93,7 @@
 (def ^:icon corner-top (icon-xref :corner-top))
 (def ^:icon corner-top-left (icon-xref :corner-top-left))
 (def ^:icon corner-top-right (icon-xref :corner-top-right))
+(def ^:icon crown (icon-xref :crown))
 (def ^:icon curve (icon-xref :curve))
 (def ^:icon delete-text (icon-xref :delete-text))
 (def ^:icon delete (icon-xref :delete))
diff --git a/frontend/src/app/main/ui/routes.cljs b/frontend/src/app/main/ui/routes.cljs
index 57886b1e3..dac362aca 100644
--- a/frontend/src/app/main/ui/routes.cljs
+++ b/frontend/src/app/main/ui/routes.cljs
@@ -34,6 +34,7 @@
     ["/password"      :settings-password]
     ["/feedback"      :settings-feedback]
     ["/options"       :settings-options]
+    ["/subscriptions" :settings-subscription]
     ["/access-tokens" :settings-access-tokens]
     ["/notifications" :settings-notifications]]
 
diff --git a/frontend/src/app/main/ui/settings.cljs b/frontend/src/app/main/ui/settings.cljs
index aa30c4f73..b562acf91 100644
--- a/frontend/src/app/main/ui/settings.cljs
+++ b/frontend/src/app/main/ui/settings.cljs
@@ -22,6 +22,7 @@
    [app.main.ui.settings.password :refer [password-page]]
    [app.main.ui.settings.profile :refer [profile-page]]
    [app.main.ui.settings.sidebar :refer [sidebar]]
+   [app.main.ui.settings.subscription :refer [subscription-page*]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -67,6 +68,9 @@
           :settings-options
           [:& options-page]
 
+          :settings-subscription
+          [:> subscription-page*]
+
           :settings-access-tokens
           [:& access-tokens-page]
 
diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs
index 5de595091..ebd297987 100644
--- a/frontend/src/app/main/ui/settings/sidebar.cljs
+++ b/frontend/src/app/main/ui/settings/sidebar.cljs
@@ -40,6 +40,9 @@
 (def ^:private go-settings-options
   #(st/emit! (rt/nav :settings-options)))
 
+(def ^:private go-settings-subscription
+  #(st/emit! (rt/nav :settings-subscription)))
+
 (def ^:private go-settings-access-tokens
   #(st/emit! (rt/nav :settings-access-tokens)))
 
@@ -62,6 +65,7 @@
         password?      (= section :settings-password)
         options?       (= section :settings-options)
         feedback?      (= section :settings-feedback)
+        subscription?  (= section :settings-subscription)
         access-tokens? (= section :settings-access-tokens)
         notifications? (= section :settings-notifications)
         team-id        (or (dtm/get-last-team-id)
@@ -104,6 +108,13 @@
              :data-testid "settings-profile"}
         [:span {:class (stl/css :element-title)} (tr "labels.settings")]]
 
+       (when (contains? cf/flags :subscriptions)
+         [:li {:class (stl/css-case :current subscription?
+                                    :settings-item true)
+               :on-click go-settings-subscription
+               :data-testid "settings-subscription"}
+          [:span {:class (stl/css :element-title)} (tr "subscription.labels")]])
+
        (when (contains? cf/flags :access-tokens)
          [:li {:class (stl/css-case :current access-tokens?
                                     :settings-item true)
diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs
new file mode 100644
index 000000000..96ef703ad
--- /dev/null
+++ b/frontend/src/app/main/ui/settings/subscription.cljs
@@ -0,0 +1,132 @@
+(ns app.main.ui.settings.subscription
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.refs :as refs]
+   [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.time :as dt]
+   [rumext.v2 :as mf]))
+
+(mf/defc plan-card*
+  {::mf/props :obj}
+  [{:keys [card-title card-title-icon price-value price-period benefits-title benefits cta-text cta-link]}]
+  [:div {:class (stl/css :plan-card)}
+   [:div {:class (stl/css :plan-card-header)}
+    [:div {:class (stl/css :plan-card-title-container)}
+     (when card-title-icon [:span {:class (stl/css :plan-title-icon)} card-title-icon])
+     [:h4 {:class (stl/css :plan-card-title)}  card-title]]
+    (when (and price-value price-period)
+      [:div {:class (stl/css :plan-price)}
+       [:span {:class (stl/css :plan-price-value)} price-value]
+       [:span {:class (stl/css :plan-price-period)} " / " price-period]])]
+   (when benefits-title [:h5 {:class (stl/css :benefits-title)} benefits-title])
+   [:ul {:class (stl/css :benefits-list)}
+    (for [benefit  benefits]
+      [:li {:key (str benefit) :class (stl/css :benefit)} "- " benefit])]
+   (when (and cta-link cta-text) [:a {:class (stl/css :cta-button)
+                                      :href cta-link} cta-text])])
+
+(mf/defc subscription-page*
+  []
+  (let [;; TODO subscription cases professional/unlimited/enterprise
+        subscription-name      :unlimited
+        subscription-is-trial  false
+        locale                 (mf/deref i18n/locale)
+        profile                (mf/deref refs/profile)
+        penpot-member          (dt/format-date-locale-short (:created-at profile) {:locale locale})
+        ;; TODO get subscription member date
+        subscription-member    "January 17, 2024"
+        ;; TODO update url to penpot payments
+        go-to-payments         "https://penpot.app/pricing"]
+
+    (mf/with-effect []
+      (dom/set-html-title (tr "subscription.labels")))
+    [:section {:class (stl/css :dashboard-section)}
+     [:div {:class (stl/css :dashboard-content)}
+      [:h2 {:class (stl/css :title-section)} (tr "subscription.labels")]
+
+
+      [:div {:class (stl/css :your-subscription)}
+       [:h3 {:class (stl/css :plan-section-title)} (tr "subscription.settings.section-plan")]
+       (case subscription-name
+         :professional
+         [:> plan-card* {:card-title (tr "subscription.settings.professional")
+                         :benefits [(tr "subscription.settings.professional.projects-files"),
+                                    (tr "subscription.settings.professional.teams-editors"),
+                                    (tr "subscription.settings.professional.storage")]}]
+
+         :unlimited
+         (if subscription-is-trial
+           [:> plan-card* {:card-title (tr "subscription.settings.unlimited-trial")
+                           :card-title-icon i/character-u
+                           :benefits-title (tr "subscription.settings.benefits.all-professional-benefits")
+                           :benefits [(tr "subscription.settings.unlimited.teams"),
+                                      (tr "subscription.settings.unlimited.bill"),
+                                      (tr "subscription.settings.unlimited.storage")]
+                           :cta-text (tr "subscription.settings.manage-your-subscription")
+                           :cta-link go-to-payments}]
+
+           [:> plan-card* {:card-title (tr "subscription.settings.unlimited")
+                           :card-title-icon i/character-u
+                           :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits")
+                           :benefits [(tr "subscription.settings.unlimited.teams"),
+                                      (tr "subscription.settings.unlimited.bill"),
+                                      (tr "subscription.settings.unlimited.storage")]
+                           :cta-text (tr "subscription.settings.manage-your-subscription")
+                           :cta-link go-to-payments}])
+
+         :enterprise
+         [:> plan-card* {:card-title (tr "subscription.settings.enterprise")
+                         :card-title-icon i/character-e
+                         :benefits-title (tr "subscription.settings.benefits.all-professiona-benefits")
+                         :benefits [(tr "subscription.settings.enterprise.support"),
+                                    (tr "subscription.settings.enterprise.security"),
+                                    (tr "subscription.settings.enterprise.logs")]
+                         :cta-text (tr "subscription.settings.manage-your-subscription")
+                         :cta-link go-to-payments}])
+
+       [:div {:class (stl/css :membership-container)}
+        (when subscription-member [:div {:class (stl/css :membership)}
+                                   [:span {:class (stl/css :subscription-member)} i/crown]
+                                   [:span {:class (stl/css :membership-date)} (tr "subscription.settings.support-us-since" subscription-member)]])
+
+        [:div {:class (stl/css :membership)}
+         [:span {:class (stl/css :penpot-member)} i/user]
+         [:span {:class (stl/css :membership-date)} (tr "subscription.settings.member-since" penpot-member)]]]]
+
+      [:div {:class (stl/css :other-subscriptions)}
+       [:h3 {:class (stl/css :plan-section-title)} (tr "subscription.settings.other-plans")]
+       (when (not= subscription-name :professional)
+         [:> plan-card* {:card-title (tr "subscription.settings.professional")
+                         :price-value "$0"
+                         :price-period (tr "subscription.settings.price-editor-month")
+                         :benefits [(tr "subscription.settings.professional.projects-files"),
+                                    (tr "subscription.settings.professional.teams-editors"),
+                                    (tr "subscription.settings.professional.storage")]
+                         :cta-text (tr "subscription.dashboard.power-up.subscribe")
+                         :cta-link go-to-payments}])
+
+       (when (not= subscription-name :unlimited)
+         [:> plan-card* {:card-title (tr "subscription.settings.unlimited")
+                         :card-title-icon i/character-u
+                         :price-value "$7"
+                         :price-period (tr "subscription.settings.price-editor-month")
+                         :benefits-title (tr "subscription.settings.benefits.all-professiona-benefits")
+                         :benefits [(tr "subscription.settings.unlimited.teams"),
+                                    (tr "subscription.settings.unlimited.bill"),
+                                    (tr "subscription.settings.unlimited.storage")]
+                         :cta-text (tr "subscription.settings.ulimited.try-it-free")
+                         :cta-link go-to-payments}])
+
+       (when (not= subscription-name :enterprise)
+         [:> plan-card* {:card-title (tr "subscription.settings.enterprise")
+                         :card-title-icon i/character-e
+                         :price-value "$950"
+                         :price-period (tr "subscription.settings.price-organization-month")
+                         :benefits-title (tr "subscription.settings.benefits.all-professiona-benefits")
+                         :benefits [(tr "subscription.settings.enterprise.support"),
+                                    (tr "subscription.settings.enterprise.security"),
+                                    (tr "subscription.settings.enterprise.logs")]
+                         :cta-text (tr "subscription.dashboard.power-up.subscribe")
+                         :cta-link go-to-payments}])]]]))
diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss
new file mode 100644
index 000000000..a9e743c01
--- /dev/null
+++ b/frontend/src/app/main/ui/settings/subscription.scss
@@ -0,0 +1,126 @@
+// 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
+
+@use "common/refactor/common-refactor.scss" as *;
+@use "../ds/typography.scss" as t;
+
+.dashboard-section {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.dashboard-content {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  max-width: $s-500;
+  margin-bottom: $s-32;
+  width: $s-580;
+  margin: $s-92 auto $s-120 auto;
+  justify-content: center;
+}
+
+.membership-container {
+  margin-block-start: $s-16;
+}
+
+.membership {
+  align-items: center;
+  display: flex;
+  margin-block-start: $s-8;
+}
+
+.membership.first {
+  margin-block-start: $s-16;
+}
+
+.membership-date {
+  @include t.use-typography("body-small");
+  color: var(--color-foreground-secondary);
+  margin-inline-start: $s-8;
+}
+
+.subscription-member,
+.penpot-member {
+  @extend .button-icon;
+}
+
+.penpot-member {
+  stroke: var(--icon-foreground);
+}
+
+.subscription-member {
+  stroke: #fdcd79ff;
+}
+
+.title-section {
+  @include t.use-typography("title-large");
+  color: var(--color-foreground-primary);
+  margin-block-end: $s-16;
+}
+
+.plan-section-title {
+  @include t.use-typography("headline-small");
+  color: var(--color-foreground-primary);
+}
+
+.plan-card {
+  border: $s-1 solid var(--color-foreground-secondary);
+  border-radius: $s-8;
+  margin-block-start: $s-16;
+  padding: $s-16;
+}
+
+.plan-card-header {
+  display: flex;
+  justify-content: space-between;
+  margin-block-end: $s-8;
+}
+
+.plan-card-title-container {
+  display: flex;
+  align-items: center;
+  gap: $s-8;
+}
+
+.plan-title-icon {
+  @extend .button-icon;
+  stroke: var(--color-foreground-primary);
+  border-radius: $s-4;
+  border: $s-1 solid var(--color-foreground-primary);
+}
+
+.plan-card-title,
+.plan-price-value {
+  @include t.use-typography("title-medium");
+  color: var(--color-foreground-primary);
+}
+
+.plan-price-period {
+  @include t.use-typography("body-small");
+  color: var(--color-foreground-primary);
+}
+
+.benefits-list {
+  margin-block: 0;
+}
+
+.benefits-title,
+.benefit {
+  @include t.use-typography("body-medium");
+  color: var(--color-foreground-secondary);
+}
+
+.other-subscriptions {
+  margin-block-start: $s-36;
+}
+
+.cta-button {
+  @include t.use-typography("body-small");
+  color: var(--color-accent-tertiary);
+}
diff --git a/frontend/src/app/util/time.cljs b/frontend/src/app/util/time.cljs
index 760b32704..a68e3d203 100644
--- a/frontend/src/app/util/time.cljs
+++ b/frontend/src/app/util/time.cljs
@@ -277,6 +277,14 @@
        (->> #js {:locale locale}
             (dfn-format v f))))))
 
+(defn format-date-locale-short
+  ([v] (format-date-locale-short v nil))
+  ([v {:keys [locale] :or {locale "en"}}]
+   (when v
+     (let [locale-obj (obj/get locales locale)
+           format-str "MMMM do, yyyy"]
+       (dfn-format (js/Date. v) format-str #js {:locale locale-obj})))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Measurement Helpers
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index d9b840c91..d9f86cddc 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -1055,6 +1055,44 @@ msgstr "Penpot Free"
 msgid "dashboard.upgrade-plan.power-up"
 msgstr "Power up"
 
+msgid "subscription.dashboard.power-up.professional.top-title"
+msgstr "Professional plan"
+
+#, markdown
+msgid "subscription.dashboard.power-up.professional.bottom-description"
+msgstr "Get extra editors and storage, file backup and more with the **Unlimited plan**"
+
+msgid "subscription.dashboard.power-up.unlimited-plan"
+msgstr "Unlimited plan"
+
+msgid "subscription.dashboard.power-up.unlimited.top-description"
+msgstr "Extra editors, storage and autosaved version, file backup and more."
+
+#, markdown
+msgid "subscription.dashboard.power-up.unlimited.bottom-description"
+msgstr "Get advanced security, activity logs, dedicated support and more with **Enterprise plan**"
+
+msgid "subscription.dashboard.power-up.enterprise-plan"
+msgstr "Enterprise plan"
+
+msgid "subscription.dashboard.power-up.unlimited.cta"
+msgstr "Take a look"
+
+msgid "subscription.dashboard.power-up.enterprise.description"
+msgstr "Advanced security, activity logs, dedicated support and more."
+
+msgid "subscription.dashboard.power-up.trial.top-title"
+msgstr "Unlimited plan (trial)"
+
+msgid "subscription.dashboard.power-up.trial.top-description"
+msgstr "Extra editors, storage and autosaved version, file backup and more."
+
+msgid "subscription.dashboard.power-up.trial.bottom-description"
+msgstr "Enjoying your trial? Unlock full access forever."
+
+msgid "subscription.dashboard.power-up.subscribe"
+msgstr "Subscribe"
+
 #: src/app/main/ui/dashboard/team.cljs:909
 msgid "dashboard.webhooks.active"
 msgstr "Is active"
@@ -2320,6 +2358,9 @@ msgstr "Sets"
 msgid "labels.settings"
 msgstr "Settings"
 
+msgid "subscription.labels"
+msgstr "Subscription"
+
 #: src/app/main/ui/viewer/header.cljs:206
 msgid "labels.share"
 msgstr "Share"
@@ -4257,6 +4298,75 @@ msgstr "Password - Penpot"
 msgid "title.settings.profile"
 msgstr "Profile - Penpot"
 
+msgid "subscription.settings.section-plan"
+msgstr "Your subscription"
+
+msgid "subscription.settings.other-plans"
+msgstr "Other penpot plans"
+
+msgid "subscription.settings.professional"
+msgstr "Professional"
+
+msgid "subscription.settings.unlimited"
+msgstr "Unlimited"
+
+msgid "subscription.settings.unlimited-trial"
+msgstr "Unlimited (trial)"
+
+msgid "subscription.settings.enterprise"
+msgstr "Enterprise"
+
+msgid "subscription.settings.support-us-since"
+msgstr "You support us since %s"
+
+msgid "subscription.settings.member-since"
+msgstr "Penpot member since %s"
+
+msgid "subscription.settings.price-editor-month"
+msgstr "editor per month"
+
+msgid "subscription.settings.price-organization-month"
+msgstr "organization per month"
+
+msgid "subscription.settings.professional.projects-files"
+msgstr "Unlimited projects, files and drafts"
+
+msgid "subscription.settings.professional.teams-editors"
+msgstr "Unlimited teams of up to 8 editors"
+
+msgid "subscription.settings.professional.storage"
+msgstr "10GB of storage and 7-day autosave versions"
+
+msgid "subscription.settings.benefits.all-professional-benefits"
+msgstr "All Professional plan benefits and:"
+
+msgid "subscription.settings.benefits.all-unlimited-benefits"
+msgstr "All Unlimited plan benefits and:"
+
+msgid "subscription.settings.unlimited.teams"
+msgstr "Unlimited teams, no matter your team size"
+
+msgid "subscription.settings.unlimited.bill"
+msgstr "Capped monthly bill"
+
+msgid "subscription.settings.unlimited.storage"
+msgstr "25GB of storage and 30-day autosave versions and file backup"
+
+msgid "subscription.settings.ulimited.try-it-free"
+msgstr "Try it free for 14 days"
+
+msgid "subscription.settings.manage-your-subscription"
+msgstr "Manage your subscription"
+
+msgid "subscription.settings.enterprise.support"
+msgstr "Dedicated support"
+
+msgid "subscription.settings.enterprise.security"
+msgstr "Advanced security"
+
+msgid "subscription.settings.enterprise.logs"
+msgstr "Activity logs"
+
 #: src/app/main/ui/dashboard/team.cljs:779
 msgid "title.team-invitations"
 msgstr "Invitations - %s - Penpot"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index c319c06f2..e24e084f8 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -1067,6 +1067,44 @@ msgstr "Penpot Gratis"
 msgid "dashboard.upgrade-plan.power-up"
 msgstr "Mejora"
 
+msgid "subscription.dashboard.power-up.professional.top-title"
+msgstr "Plan Professional"
+
+#, markdown
+msgid "subscription.dashboard.power-up.professional.bottom-description"
+msgstr "Consigue editores y almacenamiento adicionales, copias de seguridad de archivos y mucho más con el **Plan ilimitado**"
+
+msgid "subscription.dashboard.power-up.unlimited-plan"
+msgstr "Plan ilimitado"
+
+msgid "subscription.dashboard.power-up.unlimited.top-description"
+msgstr "Editores adicionales, almacenamiento y versión autoguardada, copia de seguridad de archivos y mucho más."
+
+#, markdown
+msgid "subscription.dashboard.power-up.unlimited.bottom-description"
+msgstr "Obtenga seguridad avanzada, registros de actividad, asistencia dedicada y mucho más con el **Plan de empresa**"
+
+msgid "subscription.dashboard.power-up.enterprise-plan"
+msgstr "Plan Enterprise"
+
+msgid "subscription.dashboard.power-up.unlimited.cta"
+msgstr "Echa un vistazo"
+
+msgid "subscription.dashboard.power-up.enterprise.description"
+msgstr "Seguridad avanzada, registros de actividad, asistencia dedicada y mucho más."
+
+msgid "subscription.dashboard.power-up.trial.top-title"
+msgstr "Plan Unlimited (Prueba)"
+
+msgid "subscription.dashboard.power-up.trial.top-description"
+msgstr "Editores adicionales, almacenamiento y versión autoguardada, copia de seguridad de archivos y mucho más."
+
+msgid "subscription.dashboard.power-up.trial.bottom-description"
+msgstr "¿Disfrutas de la prueba? Desbloquea el acceso completo para siempre."
+
+msgid "subscription.dashboard.power-up.subscribe"
+msgstr "Suscríbete"
+
 #: src/app/main/ui/dashboard/team.cljs:909
 msgid "dashboard.webhooks.active"
 msgstr "Activo"
@@ -2339,6 +2377,9 @@ msgstr "Sets"
 msgid "labels.settings"
 msgstr "Configuración"
 
+msgid "subscription.labels"
+msgstr "Suscripción"
+
 #: src/app/main/ui/viewer/header.cljs:206
 msgid "labels.share"
 msgstr "Compartir"
@@ -4284,6 +4325,72 @@ msgstr "Contraseña - Penpot"
 msgid "title.settings.profile"
 msgstr "Perfil - Penpot"
 
+msgid "subscription.settings.section-plan"
+msgstr "Tu suscripción"
+
+msgid "subscription.settings.other-plans"
+msgstr "Otros planes de penpot"
+
+msgid "subscription.settings.professional"
+msgstr "Professional"
+
+msgid "subscription.settings.unlimited"
+msgstr "Unlimited"
+
+msgid "subscription.settings.enterprise"
+msgstr "Enterprise"
+
+msgid "subscription.settings.support-us-since"
+msgstr "Nos apoyas desde %s"
+
+msgid "subscription.settings.member-since"
+msgstr "Miembro de penpot desde %s"
+
+msgid "subscription.settings.price-editor-month"
+msgstr "editor por mes"
+
+msgid "subscription.settings.price-organization-month"
+msgstr "organización por mes"
+
+msgid "subscription.settings.professional.projects-files"
+msgstr "Proyectos, archivos y borradores ilimitados"
+
+msgid "subscription.settings.professional.teams-editors"
+msgstr "Equipos ilimitados de hasta 8 redactores"
+
+msgid "subscription.settings.professional.storage"
+msgstr "10 GB de almacenamiento y versiones de autoguardado de 7 días"
+
+msgid "subscription.settings.benefits.all-professional-benefits"
+msgstr "Todas las prestaciones del plan Professional y:"
+
+msgid "subscription.settings.benefits.all-unlimited-benefits"
+msgstr "Todas las prestaciones del plan Unlimited y:"
+
+msgid "subscription.settings.unlimited.teams"
+msgstr "Equipos ilimitados, independientemente de su tamaño"
+
+msgid "subscription.settings.unlimited.bill"
+msgstr "Factura mensual limitada"
+
+msgid "subscription.settings.unlimited.storage"
+msgstr "25 GB de almacenamiento y 30 días de autoguardado de versiones y copias de seguridad de archivos"
+
+msgid "subscription.settings.ulimited.try-it-free"
+msgstr "Pruébalo gratis durante 14 días"
+
+msgid "subscription.settings.manage-your-subscription"
+msgstr "Gestionar tu suscripción"
+
+msgid "subscription.settings.enterprise.support"
+msgstr "Apoyo específico"
+
+msgid "subscription.settings.enterprise.security"
+msgstr "Seguridad avanzada"
+
+msgid "subscription.settings.enterprise.logs"
+msgstr "Registros de actividad"
+
 #: src/app/main/ui/dashboard/team.cljs:779
 msgid "title.team-invitations"
 msgstr "Invitaciones - %s - Penpot"