diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/README.mdx b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/README.mdx
new file mode 100644
index 000000000..6b791f391
--- /dev/null
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/README.mdx
@@ -0,0 +1,28 @@
+# Consul::Peer::Form::Generate
+
+```hbs preview-template
+
+<DataSource @src={{
+  uri '/${partition/${nspace}/${dc}/peer/${name}'
+    (hash
+      partition=''
+      nspace=''
+      dc='dc1'
+      name=''
+    )
+  }}
+as |source|>
+{{#if source.data}}
+  <Consul::Peer::Form::Generate
+    @item={{source.data}}
+    @onchange={{noop}}
+    @regenerate={{false}}
+  as |form|>
+    <form.Fieldsets />
+    <form.Actions
+      @onclose={{noop}}
+    />
+  </Consul::Peer::Form::Generate>
+{{/if}}
+</DataSource>
+```
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/actions/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/actions/index.hbs
new file mode 100644
index 000000000..5c7513233
--- /dev/null
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/actions/index.hbs
@@ -0,0 +1,10 @@
+<Action
+  form={{@id}}
+  @type="submit"
+  {{disabled (or
+    (eq @item.Name.length 0)
+  )}}
+  ...attributes
+>
+  Generate token
+</Action>
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/chart.xstate.js b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/chart.xstate.js
new file mode 100644
index 000000000..1c3b43f9d
--- /dev/null
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/chart.xstate.js
@@ -0,0 +1,26 @@
+export default {
+  id: 'consul-peer-generate-form',
+  initial: 'idle',
+  states: {
+    idle: {
+      on: {
+        LOAD: {
+          target: 'loading'
+        }
+      }
+    },
+    loading: {
+      on: {
+        SUCCESS: {
+          target: 'success'
+        },
+        ERROR: {
+          target: 'error'
+        }
+      }
+    },
+    success: {
+    },
+    error: {},
+  },
+};
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/fieldsets/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/fieldsets/index.hbs
new file mode 100644
index 000000000..f6fd4fcbc
--- /dev/null
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/fieldsets/index.hbs
@@ -0,0 +1,40 @@
+<div
+  class={{class-map
+    'consul-peer-form-generate-fieldsets'
+  }}
+  ...attributes
+>
+  <StateMachine
+    @src={{require '/machines/validate.xstate' from="/components/consul/peer/form/generate/fieldsets"}}
+  as |fsm|>
+    {{#let
+      (hash
+        help=(concat
+          (t 'common.validations.dns-hostname.help')
+          (t 'common.validations.immutable.help')
+        )
+        Name=(array
+          (hash
+            test=(t 'common.validations.dns-hostname.test')
+            error=(t 'common.validations.dns-hostname.error' name="Name")
+          )
+        )
+      )
+    as |Name|}}
+      <fieldset>
+        <TextInput
+          @label="Name of peer"
+          @name="Name"
+          @item={{@item}}
+          @validations={{Name}}
+          @chart={{fsm}}
+          @oninput={{pick 'target.value' (set @item 'Name')}}
+        />
+        {{yield (hash
+          valid=(not (state-matches fsm.state 'error'))
+        )}}
+      </fieldset>
+
+    {{/let}}
+  </StateMachine>
+</div>
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs
new file mode 100644
index 000000000..204906324
--- /dev/null
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs
@@ -0,0 +1,56 @@
+<div
+  class={{class-map
+    'consul-peer-form-generate'
+  }}
+  ...attributes
+>
+  <StateMachine
+    @src={{require './chart.xstate' from="/components/consul/peer/form/generate"}}
+    @initial={{if @regenerate 'loading' 'idle'}}
+  as |fsm|>
+
+  {{#let
+    (unique-id)
+  as |id reset|}}
+    <form
+      {{on 'submit' (fn fsm.dispatch 'LOAD')}}
+      id={{id}}
+    >
+
+      <fsm.State @matches={{array 'idle'}}>
+        {{yield (hash
+          Fieldsets=(component "consul/peer/form/generate/fieldsets"
+            item=@item
+          )
+          Actions=(component "consul/peer/form/generate/actions"
+            item=@item
+            id=id
+          )
+        )}}
+      </fsm.State>
+
+      <fsm.State @matches={{'loading'}}>
+        <DataSource
+          @src={{uri '/${partition}/${nspace}/${dc}/peering/token-for/${name}'
+            (hash
+              partition=@item.Partition
+              nspace=''
+              dc=@item.Datacenter
+              name=@item.Name
+            )
+          }}
+          @onchange={{queue
+            @onchange
+            (pick 'data' (fn fsm.dispatch 'SUCCESS'))
+          }}
+        />
+      </fsm.State>
+
+      <fsm.State @matches={{'success'}}>
+      </fsm.State>
+
+    </form>
+  {{/let}}
+
+  </StateMachine>
+</div>