diff --git a/components/subfooter-card.vue b/components/subfooter-card.vue
index 70a97ba..1ee5980 100644
--- a/components/subfooter-card.vue
+++ b/components/subfooter-card.vue
@@ -55,19 +55,13 @@
               v-html="description">
             </div>
 
-            <div v-if="fullwidth && cta" class="cta">
-              <!-- =================== EMAIL SIGN UP FORM ================== -->
-              <!-- <ButtonCta
-                :to="cta.to"
-                :tag="cta.tag"
-                :target="cta.target"
-                theme="secondary">
-                {{ cta.text }}
-              </ButtonCta> -->
-            </div>
+            <SubfooterForm
+              v-if="fullwidth && form"
+              :form="form" />
 
             <div
-              v-if="fullwidth"
+              v-if="
+                fullwidth"
               class="subheading"
               v-html="subheading">
             </div>
@@ -120,6 +114,10 @@ const code = computed(() => {
   return props.block.code
 })
 
+const form = computed(() => {
+  return props.block.subfooter_form
+})
+
 const cardStyles = computed(() => {
   if (props.block.borderGradientAngle) {
     return { '--border-gradient-angle': props.block.borderGradientAngle }
diff --git a/components/subfooter-form.vue b/components/subfooter-form.vue
new file mode 100644
index 0000000..3ddc8d8
--- /dev/null
+++ b/components/subfooter-form.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="subfooter-form">
+    <div class="inner-content form-field-container">
+
+      <div class="detail-wrapper">
+        <svg
+          width="400"
+          :viewBox="`0 0 400 ${detailHeight}`"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="detail">
+          <path
+            :d="path"
+            stroke="#FFC582"
+            stroke-width="2"
+            shape-rendering="crispEdges"
+            class="stroke-path" />
+        </svg>
+      </div>
+
+      <div class="field-email">
+        <input
+          class="email"
+          :placeholder="placeholder"
+          type="email"
+          required="true" />
+
+        <!-- @input="updateInputValue($event.target.value, 'organization')" /> -->
+      </div>
+    </div>
+
+    <ButtonCta
+      :class="['submit-button', { submitted: formSubmitted }]"
+      theme="secondary">
+      <!-- @clicked="submitForm"> -->
+      <span class="button-label"> {{ buttonText }} </span>
+    </ButtonCta>
+
+  </div>
+</template>
+
+<script setup>
+// ======================================================================= Props
+const props = defineProps({
+  form: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  variant: { // 'large', 'small' or none
+    type: String,
+    required: false,
+    default: ''
+  }
+})
+
+// ==================================================================== Computed
+const path = computed(() => {
+  if (props.variant === 'large') {
+    return 'M 536 53.6 H 2.7391 C 1.871 53.6 1.232 52.7872 1.34 51.9436 L 9.5042 18.7416 C 12.06 8.04 21.44 1.34 32.16 1.34 H 536'
+  }
+  if (props.variant === 'small') {
+    return 'M 322 32 H 2.25 C 1 32 1 30.75 1 30.75 L 6 11 C 7 5 13 1 19 1 H 322'
+  }
+  return 'M 400 40 H 2.0441 C 1.3963 40 0.9194 39.3934 1 38.7639 L 7.0927 13.9863 C 9 6 16 1 24 1 H 400'
+})
+
+const placeholder = computed(() => { return props.form.placeholder })
+
+const buttonText = computed(() => { return props.form.submit_button_text })
+
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.subfooter-form {
+  display: flex;
+  justify-content: space-between;
+  white-space: nowrap;
+  &:not(.disabled) {
+    &:hover {
+      .stroke-path {
+        stroke: $chardonnay;
+      }
+      .form-field-container {
+        &::before {
+          border-top-color: $chardonnay;
+          border-right-color: $chardonnay;
+          border-bottom-color: $chardonnay;
+        }
+      }
+    }
+    &:focus-visible {
+      @include focusBoxShadow;
+    }
+  }
+}
+
+// ////////////////////////////////////////////////////////////// Detail Wrapper
+.detail-wrapper {
+  position: absolute;
+  top: 0;
+  left: toRem(-25);
+  width: calc(100% + toRem(25) - toRem(2));
+  height: 100%;
+  overflow: hidden;
+  &.large {
+    left: toRem(-31);
+    width: calc(100% + toRem(31) - toRem(2));
+  }
+}
+
+.detail {
+  height: 100%;
+  .fill-path {
+    opacity: 0.2;
+    fill: #070707;
+    @include transitionDefault;
+  }
+}
+
+// ////////////////////////////////////////////////////////////////// Form field
+.form-field-container {
+  position: relative;
+  display: block;
+  height: toRem(41);
+  width: fit-content;
+  filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.32));
+  .stroke-path {
+    stroke: $sageGreen;
+  }
+  &:before {
+    content: '';
+    position: absolute;
+    left: toRem(28);
+    top: 0;
+    width: calc(100% - 25px);
+    height: 100%;
+    box-sizing: border-box;
+    border-top: solid 2px $sageGreen;
+    border-bottom: solid 2px $sageGreen;
+    border-right: solid 2px $sageGreen;
+    border-top-right-radius: toRem(5);
+    border-bottom-right-radius: toRem(5);
+    @include transitionDefault;
+  }
+}
+
+.field-email {
+  position: relative;
+  display: flex;
+  align-items: center;
+  @include formFieldText;
+  &::placeholder {
+    @include formFieldPlaceholder;
+  }
+}
+.email {
+  padding: toRem(10) toRem(17) toRem(10) toRem(3);
+}
+
+// /////////////////////////////////////////////////////////////// Submit Button
+
+</style>
diff --git a/content/core/index.json b/content/core/index.json
index f613c75..15230ed 100644
--- a/content/core/index.json
+++ b/content/core/index.json
@@ -174,7 +174,7 @@
                     "text": "View all 30+ compatible storage services",
                     "tag": "a",
                     "to": "https://data-programs.gitbook.io/singularity/installation/install-from-source",
-                    "theme": "secondary" 
+                    "theme": "secondary"
                   }
                 ]
               }
@@ -507,7 +507,11 @@
         "borderGradientAngle": "45deg",
         "title": "<img src='/images/topography-graphic-with-border.svg' />Keep up<br>with Singularity",
         "subheading": "Your feedback can shape our next big release. <br>Join us on <a href='https://github.com/data-preservation-programs/singularity' target='_blank'>Github</a> and <a href='https://filecoinproject.slack.com/archives/C05JABREATH' target='_blank'>Slack</a>",
-        "description": "<span class='weight-500'>Sign up to keep up.</span> We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox."
+        "description": "<span class='weight-500'>Sign up to keep up.</span> We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox.",
+        "subfooter_form": {
+          "placeholder": "Enter your email",
+          "submit_button_text": "Keep up"
+        }
       }
     }
   ]