diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs
index c0ade1f61c..b3fa6e2d44 100644
--- a/frontend/src/app/main/ui/settings/subscription.cljs
+++ b/frontend/src/app/main/ui/settings/subscription.cljs
@@ -83,74 +83,101 @@
    ::mf/register-as :management-dialog}
   [{:keys [subscription-type current-subscription editors subscribe-to-trial]}]
 
-  (let [unlimited-modal-step* (mf/use-state 1)
-        unlimited-modal-step  (deref unlimited-modal-step*)
-        subscription-name (if subscribe-to-trial
-                            (if (= subscription-type "unlimited")
-                              (tr "subscription.settings.unlimited-trial")
-                              (tr "subscription.settings.enterprise-trial"))
-                            (case subscription-type
-                              "professional" (tr "subscription.settings.professional")
-                              "unlimited" (tr "subscription.settings.unlimited")
-                              "enterprise" (tr "subscription.settings.enterprise")))
-        min-editors                (if (seq editors) (count editors) 1)
-        initial                    (mf/with-memo [min-editors]
-                                     {:min-members min-editors})
-        form                       (fm/use-form :schema (schema:seats-form min-editors)
-                                                :initial initial)
-        submit-in-progress*        (mf/use-state false)
-        subscribe-to-unlimited     (mf/use-fn
-                                    (mf/deps form)
-                                    (fn [add-payment-details]
-                                      (when (not @submit-in-progress*)
-                                        (let [data (:clean-data @form)
-                                              return-url (-> (rt/get-current-href) (rt/encode-url))
-                                              href (if add-payment-details
-                                                     (dm/str "payments/subscriptions/create?type=unlimited&show=true&quantity=" (:min-members data) "&returnUrl=" return-url)
-                                                     (dm/str "payments/subscriptions/create?type=unlimited&show=false&quantity=" (:min-members data) "&returnUrl=" return-url))]
-                                          (reset! submit-in-progress* true)
-                                          (reset! form nil)
-                                          (st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
-                                                                           :type "unlimited"
-                                                                           :quantity (:min-members data)})
-                                                    (rt/nav-raw :href href))))))
+  (let [unlimited-modal-step*
+        (mf/use-state 1)
 
-        subscribe-to-enterprise   (mf/use-fn
-                                   (fn []
-                                     (st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
-                                                                      :type "enterprise"}))
-                                     (let [return-url (-> (rt/get-current-href) (rt/encode-url))
-                                           href (dm/str "payments/subscriptions/create?type=enterprise&returnUrl=" return-url)]
-                                       (st/emit! (rt/nav-raw :href href)))))
+        unlimited-modal-step
+        (deref unlimited-modal-step*)
 
-        handle-accept-dialog       (mf/use-fn
-                                    (fn []
-                                      (st/emit! (ptk/event ::ev/event {::ev/name "open-subscription-management"
-                                                                       ::ev/origin "settings"
-                                                                       :section "subscription-management-modal"}))
-                                      (let [current-href (rt/get-current-href)
-                                            returnUrl (js/encodeURIComponent current-href)
-                                            href (dm/str "payments/subscriptions/show?returnUrl=" returnUrl)]
-                                        (st/emit! (rt/nav-raw :href href)))
-                                      (modal/hide!)))
-        handle-close-dialog        (mf/use-fn
-                                    (fn []
-                                      (st/emit! (ptk/event ::ev/event {::ev/name "close-subscription-modal"}))
-                                      (modal/hide!)))
+        subscription-name
+        (if subscribe-to-trial
+          (if (= subscription-type "unlimited")
+            (tr "subscription.settings.unlimited-trial")
+            (tr "subscription.settings.enterprise-trial"))
+          (case subscription-type
+            "professional" (tr "subscription.settings.professional")
+            "unlimited" (tr "subscription.settings.unlimited")
+            "enterprise" (tr "subscription.settings.enterprise")))
 
-        handle-unlimited-modal-step (mf/use-fn
-                                     (mf/deps unlimited-modal-step)
-                                     (fn []
-                                       (if (= unlimited-modal-step 1)
-                                         (reset! unlimited-modal-step* 2)
-                                         (reset! unlimited-modal-step* 1))))
+        min-editors
+        (if (seq editors) (count editors) 1)
 
-        show-editors-list*         (mf/use-state false)
-        show-editors-list          (deref show-editors-list*)
-        handle-click               (mf/use-fn
-                                    (fn [event]
-                                      (dom/stop-propagation event)
-                                      (swap! show-editors-list* not)))]
+        initial
+        (mf/with-memo [min-editors]
+          {:min-members min-editors})
+
+        form
+        (fm/use-form :schema (schema:seats-form min-editors)
+                     :initial initial)
+
+        form-data-min-editors
+        (-> @form :clean-data :min-members)
+
+        submit-in-progress*
+        (mf/use-state false)
+
+        subscribe-to-unlimited
+        (mf/use-fn
+         (mf/deps form-data-min-editors)
+         (fn [add-payment-details]
+           (when (not @submit-in-progress*)
+             (let [return-url (-> (rt/get-current-href) (rt/encode-url))
+                   href (if add-payment-details
+                          (dm/str "payments/subscriptions/create?type=unlimited&show=true&quantity=" form-data-min-editors "&returnUrl=" return-url)
+                          (dm/str "payments/subscriptions/create?type=unlimited&show=false&quantity=" form-data-min-editors "&returnUrl=" return-url))]
+               (reset! submit-in-progress* true)
+               (reset! form nil)
+               (st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
+                                                :type "unlimited"
+                                                :quantity form-data-min-editors})
+                         (rt/nav-raw :href href))))))
+
+        subscribe-to-enterprise
+        (mf/use-fn
+         (fn []
+           (st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
+                                            :type "enterprise"}))
+           (let [return-url (-> (rt/get-current-href) (rt/encode-url))
+                 href (dm/str "payments/subscriptions/create?type=enterprise&returnUrl=" return-url)]
+             (st/emit! (rt/nav-raw :href href)))))
+
+        handle-accept-dialog
+        (mf/use-fn
+         (fn []
+           (st/emit! (ptk/event ::ev/event {::ev/name "open-subscription-management"
+                                            ::ev/origin "settings"
+                                            :section "subscription-management-modal"}))
+           (let [current-href (rt/get-current-href)
+                 returnUrl (js/encodeURIComponent current-href)
+                 href (dm/str "payments/subscriptions/show?returnUrl=" returnUrl)]
+             (st/emit! (rt/nav-raw :href href)))
+           (modal/hide!)))
+
+        handle-close-dialog
+        (mf/use-fn
+         (fn []
+           (st/emit! (ptk/event ::ev/event {::ev/name "close-subscription-modal"}))
+           (modal/hide!)))
+
+        handle-unlimited-modal-step
+        (mf/use-fn
+         (mf/deps unlimited-modal-step)
+         (fn []
+           (if (= unlimited-modal-step 1)
+             (reset! unlimited-modal-step* 2)
+             (reset! unlimited-modal-step* 1))))
+
+        show-editors-list*
+        (mf/use-state false)
+
+        show-editors-list
+        (deref show-editors-list*)
+
+        handle-click
+        (mf/use-fn
+         (fn [event]
+           (dom/stop-propagation event)
+           (swap! show-editors-list* not)))]
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-dialog)}
@@ -246,7 +273,7 @@
                [:input
                 {:class (stl/css :cancel-button)
                  :type "button"
-                 :value (tr "ubscription.settings.management-dialog.step-2-skip-button")
+                 :value (tr "subscription.settings.management-dialog.step-2-skip-button")
                  :on-click #(subscribe-to-unlimited false)}]
 
                [:input
diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss
index 5bb2443551..e86d54cd16 100644
--- a/frontend/src/app/main/ui/settings/subscription.scss
+++ b/frontend/src/app/main/ui/settings/subscription.scss
@@ -8,10 +8,12 @@
 @use "ds/typography.scss" as t;
 @use "ds/_borders.scss" as *;
 @use "ds/spacing.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .dashboard-section {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -20,10 +22,10 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  max-width: deprecated.$s-500;
+  max-inline-size: $sz-500;
   margin-block-end: var(--sp-xxxl);
-  width: deprecated.$s-580;
-  margin: deprecated.$s-92 auto deprecated.$s-120 auto;
+  inline-size: px2rem(580);
+  margin: px2rem(92) auto px2rem(120) auto;
   justify-content: center;
 }
 
@@ -98,8 +100,8 @@
 .plan-title-icon {
   @extend .button-icon;
   stroke: var(--color-foreground-primary);
-  height: var(--sp-xl);
-  width: var(--sp-xl);
+  block-size: var(--sp-xl);
+  inline-size: var(--sp-xl);
   border-radius: 6px;
   border: 1.75px solid var(--color-foreground-primary);
   stroke-width: 2.25px;
@@ -140,7 +142,7 @@
 }
 
 .other-subscriptions {
-  margin-block-start: deprecated.$s-52;
+  margin-block-start: px2rem(52);
 }
 
 .cta-button {
@@ -155,8 +157,8 @@
 
 .cta-button svg {
   @extend .button-icon;
-  height: var(--sp-l);
-  width: var(--sp-l);
+  block-size: var(--sp-l);
+  inline-size: var(--sp-l);
   stroke: var(--color-accent-primary);
   margin-inline-start: var(--sp-xs);
 }
@@ -179,14 +181,12 @@
 
 .modal-dialog {
   @extend .modal-container-base;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  max-height: initial;
-  min-width: deprecated.$s-548;
+  max-block-size: initial;
+  min-inline-size: px2rem(548);
 }
 
 .modal-dialog.subscription-success {
-  min-width: deprecated.$s-648;
+  min-inline-size: px2rem(648);
 }
 
 .close-btn {
@@ -232,11 +232,11 @@
 
 .modal-success-content {
   display: flex;
-  gap: deprecated.$s-40;
+  gap: $sz-40;
 }
 
 .modal-footer {
-  margin-block-start: deprecated.$s-40;
+  margin-block-start: $sz-40;
 }
 
 .action-buttons {
@@ -249,23 +249,28 @@
 
 .primary-button {
   @extend .modal-accept-btn;
+  min-block-size: $sz-32;
+  block-size: auto;
 }
 
 .cancel-button {
   @extend .modal-cancel-btn;
+  min-block-size: $sz-32;
+  white-space: break-spaces;
+  block-size: auto;
 }
 
 .modal-start {
   display: flex;
   justify-content: center;
-  max-width: deprecated.$s-220;
+  max-inline-size: $sz-224;
 
   svg {
-    width: 100%;
-    height: auto;
+    inline-size: 100%;
+    block-size: auto;
   }
 
-  @media (max-width: 992px) {
+  @media (max-inline-size: 992px) {
     display: none;
   }
 }
@@ -285,19 +290,19 @@
   list-style-position: inside;
   list-style-type: none;
   margin-inline-start: var(--sp-xl);
-  max-height: deprecated.$s-216;
+  max-block-size: px2rem(216);
   overflow-y: auto;
 }
 
 .input-field {
   --input-icon-padding: var(--sp-s);
-  width: deprecated.$s-80;
+  inline-size: px2rem(80);
 }
 
 .error-message {
   @include t.use-typography("body-small");
   color: var(--color-foreground-error);
-  margin-block-start: deprecated.$s-8;
+  margin-block-start: var(--sp-s);
 }
 
 .editors-wrapper {
@@ -316,7 +321,7 @@
   @include t.use-typography("body-small");
   background-color: var(--color-background-tertiary);
   border-radius: var(--sp-s);
-  margin-block-start: deprecated.$s-40;
+  margin-block-start: $sz-40;
   padding-block: var(--sp-s);
   padding-inline: var(--sp-m);
 }