diff --git a/src/assets/images/components/section/cloud/SectionCloudAccountSettingsForm/navigate-arrow.svg b/src/assets/images/components/section/cloud/SectionCloudAccountSettingsForm/navigate-arrow.svg
new file mode 100644
index 0000000..d40a627
--- /dev/null
+++ b/src/assets/images/components/section/cloud/SectionCloudAccountSettingsForm/navigate-arrow.svg
@@ -0,0 +1 @@
+<svg height="10" viewBox="0 0 11 10" width="11" xmlns="http://www.w3.org/2000/svg"><path d="m10.9833656 16.0005298c0-.1756689-.0717295-.3459922-.2036999-.4731886l-3.82904629-3.8184184c-.14667346-.1477694-.29912099-.2089228-.4627-.2089228-.36019524 0-.62187998.2574042-.62187998.6077008 0 .1803238.06847936.3359977.18453831.4509792l1.30214362 1.3191206 2.16968378 1.9840263.20203316-.3774996-2.01098596-.1183567h-7.07215479c-.38180101 0-.64129755.2600776-.64129755.6345592s.25949654.6345591.64129755.6345591h7.07215479l2.01098596-.1183566-.20203316-.3716899-2.16968378 1.9782404-1.30214362 1.3180372c-.11605895.1091718-.18453831.2706673-.18453831.4509733 0 .3503138.26168474.6077067.62187998.6077067.16357901 0 .31602654-.0658959.45317575-.1993545l3.83857054-3.8269271c.1319704-.1271905.2036999-.2975138.2036999-.4731886z" transform="matrix(-1 0 0 1 10.9834 -11)"/></svg>
diff --git a/src/components/partial/cloud/PartialCloudSignupFormFieldsetActivate.vue b/src/components/partial/cloud/PartialCloudSignupFormFieldsetActivate.vue
index 008c7c7..ca7da6a 100644
--- a/src/components/partial/cloud/PartialCloudSignupFormFieldsetActivate.vue
+++ b/src/components/partial/cloud/PartialCloudSignupFormFieldsetActivate.vue
@@ -88,12 +88,11 @@
           autofocus
           submittable
         )
-          span.c-partial-cloud-signup-form-fieldset-activate__input-preview
-            base-payment-icon(
-              :provider="cardBrand"
-              height="21px"
-              class="c-partial-cloud-signup-form-fieldset-activate__input-preview-brand"
-            )
+          base-payment-preview(
+            :provider="cardBrand"
+            class="c-partial-cloud-signup-form-fieldset-activate__input-preview"
+            animated
+          )
 
     .c-partial-cloud-signup-form-fieldset-activate__nest.c-partial-cloud-signup-form-fieldset-activate__nest--name-and-cvv
       form-labelled-field(
@@ -373,23 +372,10 @@ $c: ".c-partial-cloud-signup-form-fieldset-activate";
         }
 
         #{$c}__input-preview {
-          background: $color-white;
-          border: 1px solid $color-border-secondary;
-          width: 40px;
-          height: 30px;
-          pointer-events: none;
-          display: flex;
-          align-items: center;
-          justify-content: center;
           position: absolute;
           top: 50%;
           left: 14px;
           transform: translateY(-50%);
-          border-radius: 7px;
-
-          #{$c}__input-preview-brand {
-            flex: 0 0 auto;
-          }
         }
       }
     }
diff --git a/src/components/section/cloud/SectionCloudAccountSettingsForm.vue b/src/components/section/cloud/SectionCloudAccountSettingsForm.vue
index 88c59f3..5d2e930 100644
--- a/src/components/section/cloud/SectionCloudAccountSettingsForm.vue
+++ b/src/components/section/cloud/SectionCloudAccountSettingsForm.vue
@@ -11,7 +11,89 @@
 <template lang="pug">
 .c-section-cloud-account-settings-form
   page-wrapper
-    | TODO: settings form
+    .c-section-cloud-account-settings-form__inner
+      .c-section-cloud-account-settings-form__navigate
+        nuxt-link(
+          to="/cloud/account/workspaces/"
+          class="c-section-cloud-account-settings-form__navigate-link u-medium"
+        )
+          image-navigate-arrow(
+            class="c-section-cloud-account-settings-form__navigate-icon"
+          )
+
+          | Back to my workspaces
+
+      .c-section-cloud-account-settings-form__fields
+        form-labelled-field(
+          name="account_email"
+          label="Your email address"
+          class="c-section-cloud-account-settings-form__field"
+        )
+          .c-section-cloud-account-settings-form__field-sider
+            form-field(
+              v-model="form.email"
+              name="account_email"
+              type="email"
+              align="left"
+              tint="light"
+              size="mid-large"
+              placeholder="Enter an email…"
+            )
+
+            base-button(
+              tint="link"
+            )
+              | Edit Email
+
+        form-labelled-field(
+          name="account_password"
+          label="Change your password"
+          class="c-section-cloud-account-settings-form__field"
+        )
+          .c-section-cloud-account-settings-form__field-sider
+            form-field(
+              v-model="form.password"
+              name="account_password"
+              type="password"
+              align="left"
+              tint="light"
+              size="mid-large"
+              placeholder="Enter a new password…"
+            )
+
+            base-button(
+              tint="link"
+            )
+              | Edit Password
+
+        form-labelled-field(
+          name="billing_card"
+          label="Edit your payment method"
+          class="c-section-cloud-account-settings-form__field"
+        )
+          .c-section-cloud-account-settings-form__field-card
+            .c-section-cloud-account-settings-form__field-card-badge
+              base-payment-preview(
+                :provider="card.brand"
+                class="c-section-cloud-account-settings-form__field-card-badge-preview"
+              )
+
+            .c-section-cloud-account-settings-form__field-card-preview
+              p.c-section-cloud-account-settings-form__field-card-number.u-ellipsis.u-medium
+                | {{ card.numberPreview }}
+
+              p.c-section-cloud-account-settings-form__field-card-identity
+                span.u-ellipsis
+                  | {{ card.nameOnCard }}
+
+                span.u-ellipsis
+                  | Exp. {{ card.expireMonthYear }}
+
+            .c-section-cloud-account-settings-form__field-card-action
+              base-button(
+                tint="link"
+              )
+                | Edit Card
 </template>
 
 <!-- **********************************************************************
@@ -19,8 +101,32 @@
      ********************************************************************** -->
 
 <script>
+// PROJECT: IMAGES
+import ImageNavigateArrow from "@/assets/images/components/section/cloud/SectionCloudAccountSettingsForm/navigate-arrow.svg?component";
+
 export default {
-  name: "SectionCloudAccountSettingsForm"
+  name: "SectionCloudAccountSettingsForm",
+
+  components: { ImageNavigateArrow },
+
+  data() {
+    return {
+      // --> STATE <----
+
+      // TODO: those are fixtures
+      card: {
+        brand: "mastercard",
+        numberPreview: "5355 XXXX XXXX XXXX",
+        nameOnCard: "Valerian Saliou",
+        expireMonthYear: "05/28"
+      },
+
+      form: {
+        email: "",
+        password: ""
+      }
+    };
+  }
 };
 </script>
 
@@ -32,6 +138,112 @@ export default {
 $c: ".c-section-cloud-account-settings-form";
 
 #{$c} {
-  /* TODO */
+  #{$c}__inner {
+    max-width: 540px;
+    margin: 0 auto;
+  }
+
+  #{$c}__navigate {
+    margin-top: -20px;
+
+    #{$c}__navigate-link {
+      color: $color-base-black-mid;
+      font-size: 15px;
+      letter-spacing: 0.1px;
+      line-height: 22px;
+      display: inline-flex;
+      align-items: center;
+
+      #{$c}__navigate-icon {
+        height: 11px;
+        margin-right: 7px;
+        margin-bottom: -1px;
+        flex: 0 0 auto;
+        transition: transform 100ms linear;
+      }
+
+      &:hover {
+        #{$c}__navigate-icon {
+          transform: translateX(-2px);
+        }
+      }
+
+      &:active {
+        #{$c}__navigate-icon {
+          transform: translateX(1px);
+        }
+      }
+    }
+  }
+
+  #{$c}__fields {
+    margin-top: 50px;
+
+    > * {
+      margin-bottom: 34px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    #{$c}__field {
+      #{$c}__field-sider,
+      #{$c}__field-card {
+        display: flex;
+        align-items: center;
+      }
+
+      #{$c}__field-sider {
+        column-gap: 14px;
+
+        > * {
+          &:nth-child(1) {
+            flex: 1;
+          }
+
+          &:nth-child(2) {
+            min-width: 136px;
+            flex: 0 1 auto;
+          }
+        }
+      }
+
+      #{$c}__field-card {
+        border: 1px solid $color-border-secondary;
+        padding: 18px 16px;
+        border-radius: $form-field-border-radius;
+
+        #{$c}__field-card-badge {
+          margin-right: 22px;
+          flex: 0 0 auto;
+        }
+
+        #{$c}__field-card-preview {
+          flex: 1;
+          overflow: hidden;
+        }
+
+        #{$c}__field-card-number {
+          color: $color-base-black-mid;
+          font-size: 18px;
+        }
+
+        #{$c}__field-card-identity {
+          color: $color-base-grey-dark;
+          font-size: 15.5px;
+          margin-top: 10px;
+          display: flex;
+          align-items: center;
+          column-gap: 14px;
+        }
+
+        #{$c}__field-card-action {
+          margin-left: 14px;
+          flex: 0 1 auto;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/pages/cloud/account/workspaces.vue b/src/pages/cloud/account/workspaces.vue
index c84bed7..44e73e7 100644
--- a/src/pages/cloud/account/workspaces.vue
+++ b/src/pages/cloud/account/workspaces.vue
@@ -71,10 +71,6 @@ $c: ".p-cloud-account-workspaces";
     flex: 1;
   }
 
-  #{$c}__picker {
-    /* TODO */
-  }
-
   #{$c}__navigator {
     position: absolute;
     left: 0;